css中图片如何显示出来 |css给文本设置颜色代码

在 CSS 中，图片可以通过背景属性或者 content 属性来显示。下面大家来看一下具体的实现方式。 1. 背景图片 通过设置背景属性，大家可以将一张图片设置为元素的背景。代码如下：

p {
background-image: url("图片路径");
background-repeat: no-repeat;
background-size: cover;
}

其中，background-image 属性是指所使用的背景图片的 URL。background-repeat 属性设置图片是否重复展示，这里大家设置为 no-repeat，表示不重复。background-size 属性则是控制背景图片的大小和尺寸，cover 值指的是“盖住”整个元素的背景图片，保持比例不变。 2. content 图片 大家也可以通过 content 属性来添加图片。该方法要求大家先将图片转换成 Base64 编码，然后将其插入到 content 中。代码如下：

p:before {
content: url(data:image/png;base64,iVBORw0KGg......);
}

其中，p:before 表示在元素前插入图片，content 属性中则需要填入图片的 Base64 编码。请注意，该方法只适用于小尺寸的图片，较大的图片会导致 CSS 加载延迟。 通过上述两种方式，大家便可以将图片嵌入到 CSS 中，实现炫酷的页面设计效果。