css如何同时给元素设置背景和背景图?
css设置元素背景属性,我们可以先看下背景有哪些属性
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
在css中设置参数时,我们会按需使用对应的背景属性,但有时候我们想要使用简略的写法的时候可能就会把所有的属性合并在一起,这时候就要求我们之前背景属性的顺序。
当使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.
如:
background:#f00 url('bg.png') no-repeat center top;
这里设置了元素的背景颜色、背景图片、背景图片不重复、背景图片起始位置(右上)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head><style>.content{margin: 100px auto;width: 500px;height: 500px;border: 1px solid #000;background: #f00 url('./img/bg.png') top center no-repeat;}</style>
<body>
<div class="content"></div>
</body></html>