DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
CSS 中的 background-image
属性将图形(例如 PNG、SVG、JPG、GIF、WEBP)或渐变应用于元素的背景。
您可以使用 CSS 包含两种类型的图像:普通图像和渐变。
图像
在背景上使用图像非常简单
body {
background: url(sweettexture.jpg);
}
url()
值允许您提供任何图像的文件路径,它将显示为该元素的背景。
您还可以为 url()
设置数据 URI。 它看起来像这样
body {
/* Base64 encoded transparent gif */
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
此技术减少了一个 HTTP 请求,这是一件好事。 但是,它也有一些缺点,因此在您开始替换所有图像之前,请确保您考虑了所有 数据 URI 的优缺点。
您还可以使用 background-image
来 精灵图像,这是另一种用于减少 HTTP 请求的实用方法。
渐变
使用背景时的另一个选择是告诉浏览器创建渐变。 这是一个超级简单的线性渐变示例
body {
background: linear-gradient(black, white);
}
您也可以使用径向渐变
body {
background: radial-gradient(circle, black, white);
}
从技术上讲,渐变只是另一种形式的背景图像。 不同之处在于浏览器为您制作图像。 这是一个关于如何制作和使用它们的 完整指南。
上面的示例只使用了一个渐变,但您也可以将多个渐变叠加在一起。 使用这种技术,您可以创建一些 非常棒的图案。
设置回退颜色
如果背景图像无法加载,或者您的渐变背景在不支持渐变的浏览器上查看,浏览器将查找背景颜色作为回退。 您可以像这样指定回退颜色
body {
background: url(sweettexture.jpg) blue;
}
多个背景图像
您可以使用多个图像,或将图像和渐变混合使用作为您的背景。 多个背景图像现在得到了很好的支持(所有现代浏览器和 IE9+ 用于图形图像,IE10+ 用于渐变)。
当您使用多个背景图像时,请注意存在一个有点违反直觉的 堆叠顺序。 将应位于最前面的图像列在最前面,将应位于最后面的图像列在最后,如下所示
body {
background: url(logo.png), url(background-pattern.png);
}
当您使用多个背景图像时,您通常需要为背景设置更多值以将所有内容放置在正确的位置。 如果您想使用 background
简写,您可以分别为每个图像设置值。 您的简写将看起来像这样(注意用逗号分隔第一个图像及其值与第二个图像及其值)
body {
background:
url(logo.png) bottom center no-repeat,
url(background-pattern.png) repeat;
}
您设置的背景图像数量没有限制,您可以执行诸如动画背景图像之类的酷炫操作。 David Walsh 的博客 上有一个带有动画的多个背景图像的良好示例。
演示
浏览器支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 | 全部 |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 90+ | 62+ |
背景图片渐变支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
10+ | 全部 | 全部 | 3.6+ | 4+ | 11.5+ |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 90+ | 62+ |
背景图片 SVG 支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
9+ | 全部 | 8+ | 4+ | 5+ | 全部 |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
5+ | 全部 | 全部 | 90+ | 62+ |
更多信息
- CSS 背景和边框模块第 3 级 (W3C)
- 理解成功准则 1.1.1 (W3C 无障碍)
- 如何更改 CSS 背景图片的透明度 (DigitalOcean)
- 如何使用 CSS 将背景样式应用于 HTML 元素 (DigitalOcean)
相关技巧!
CSS 基础:使用多个背景
多个背景的堆叠顺序
定位偏移背景图片
背景图片形状
如何:可调整大小的背景图片
将滤镜应用于背景图片
缩放背景图片
使用 background-image 更精细地控制 CSS 边框
使用多个背景图片提高感知性能
使用百分比将 `background-image` 定位到精确位置
如何使用 element() 将文本作为背景图片重复
06: 使用 SVG - SVG 作为 background-image
在文本被选中时显示背景图片
最棒的 CSS 技巧 第一卷
相关属性
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
背景混合模式
.element { background-blend-mode: screen; }
背景裁剪
.element { background-clip: padding-box; }
背景颜色
element{ background-color: #ff7a18; }
背景来源
.element { background-origin: border-box; }
背景位置
.element { background-position: 100px 5px; }
背景重复
.element { background-repeat: repeat-x; }
背景尺寸
.element { background-size: 300px 100px; }
使用这种方法 - 我想在移动宽度上隐藏顶层。我重复了背景堆栈 - 但删除了顶层 - 它仍然出现?当我尝试使用不透明度来隐藏它时,它应用于所有层。
function example() {
element.innerHTML = “#F3-Col1-Row1 {
padding:77px 0px;
background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/banners/Dash_mob_resp_med.png) no-repeat scroll right bottom, url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
background-size: contain;
@media only screen (max-width: 959px) {
padding:33px 0px!important;
background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
background-size: contain;
}
@media only screen (max-width: 580px) {
padding:33px 0px!important;
}
#F6-Col1-Row1 {
padding-top: 50px;
}
}”;
}
优秀。
我正在开始使用 JEE,阅读这篇文章,我的知识得到了很大提高。
现在我可以更好地理解在这个环境中如何进行编程的机制。
你能告诉我如何到达芝麻街吗?
我喜欢这个页面的背景。我很想知道要使用什么 css 代码来创建类似的效果…
右键单击背景,然后选择“检查”/“检查元素”/等以查看用于创建内容的代码。在这种情况下,看起来他使用了一个 base64 编码的 svg
background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBxPScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
我如何在电脑上保存的图片作为背景图片。
优秀。
我喜欢这个页面的背景。
我在本地网站中使用正确的路径插入背景图片,但图片没有显示出来,我不知道为什么,我已经尝试过所有方法,但就是不起作用。
已解决(../image
两个点和斜杠解决了问题!
嘿,我不知道如何在 URL 中给出图片的路径……有人能指导我吗?
如何通过源 (src) 而不是 URL 设置背景图片?
不幸的是,
src()
不是background-image
语法的一部分。实际上,当你在 url() 中给出图片的路径时,它确实有效。确保给出正确的图片路径。我的图片存储在我的 HTML 文件所在的目录中,位于另一个名为 assets 的文件夹中。
在一个 CSS 文件中,我找到了这个
background-image: url(https://c.pxhere.com/photos/4f/ee/candy_toppings_sweet_colorful_sugar-883692.jpg!d);
结尾的 !d 代表什么?
这只是一个参数,你可以在背景属性上使用任何图片类型。
例如
background:url(https://cdn1.photostockeditor.com/c/1512/cup-green-teapot-pouring-red-liquid-to-white-teacup-closeup-photography-beverage-beverage-image.jpg)
“设置一个备用颜色”对我来说不起作用。刷新时,它总是先闪烁颜色,然后再显示图片。可能是 Firefox 和 Chrome 的 bug 吗?