Html 用css颜色替换图片，并根据内容调整大小

我有一个生成透明div的CSS代码：

.camera_caption {
    position: relative;
    background: url(../images/capture_bg1.png) 0 0 repeat-x;
    left: 0;
    margin-top: 263px;
    width: 717px;
    height: 234px;
    padding-left: 365px;
    font: normal 14px/24px 'Roboto';
    color: #fff;

}

如您所见，背景是使用以下图像生成的：

但我对这个解决方案有几个问题： 我想使用纯CSS代码来显示彩色背景。 我还想根据内容大小调整背景高度。例如，我有几行不同语言的文本。我需要动态调整背景层的大小

---

你能为我提出一些解决问题的办法吗？

我不知道你的问题到底是什么，你想做什么

但对于自动调整大小，您可以删除给定的宽度和高度。也许你可以有100%的宽度，如果这会更吸引人

width:100%;

如果你需要一个最小的高度和宽度，你可以这样做

min-height:500px;
min-width:500px;

使用此代码添加背景色

background:blue;

---

如果您能详细阐述或更好地发布一篇文章，我们可以提供更好的帮助。

我不知道您的问题到底是什么，您想做什么

但对于自动调整大小，您可以删除给定的宽度和高度。也许你可以有100%的宽度，如果这会更吸引人

width:100%;

如果你需要一个最小的高度和宽度，你可以这样做

min-height:500px;
min-width:500px;

使用此代码添加背景色

background:blue;

---

<强>如果您可以详细地或更好地张贴小提琴，我们可以更好地帮助。< /强>

< p>如果您想使用纯CSS，您可能需要考虑的在线工具是将上传的图像转换为BASE-64编码，然后将其包含在 CsS//Cuff>类定义中。最终结果如下面的示例所示。这样做，您不需要图像，因为

背景图像：url（数据：…）

属性的值就是图像。在您的情况下，只需在图像编辑器中创建彩色背景，上传它，然后获取生成的代码

这有好处也有坏处。好的一面是，您不必担心图像丢失，但是您添加了大量代码（特别是如果它是一个大图像），并且“图像”永远不会被缓存。您可能还需要使用一些javascript来动态调整背景大小，或者，您可以研究使用css属性来适当地调整背景大小

.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}

---

如果您想使用纯CSS，您可能需要考虑的在线工具是将上传的图像转换为BASE-64编码，然后将其包含在您的代码> CSS类定义中。最终结果如下面的示例所示。这样做，您不需要图像，因为

背景图像：url（数据：…）

属性的值就是图像。在您的情况下，只需在图像编辑器中创建彩色背景，上传它，然后获取生成的代码

这有好处也有坏处。好的一面是，您不必担心图像丢失，但是您添加了大量代码（特别是如果它是一个大图像），并且“图像”永远不会被缓存。您可能还需要使用一些javascript来动态调整背景大小，或者，您可以研究使用css属性来适当地调整背景大小

.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}