我正在尝试在属性不足的属性中混合使用background-image
和background-size
属性background
。基于W3C的文档
background-size
应background-position
以斜杠(/
)分隔属性之后。
W3C示例:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
等效于:
p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) }
但这是行不通的!还不清楚如何background
在background-size
和分别background-position
具有background-position-x
和background-position-y
或具有相同的值时使用简写属性background-size
。尚不清楚slash(/
)是如何发生的?在我的Chrome15中无法正常运行。
我试图简化的示例是此CSS代码:
div {
background: url(http://www.placedog.com/125/125)
0 0 / 150px 100px
repeat no-repeat
fixed border-box padding-box blue;
height: 300px;
width:360px;
border: 10px dashed magenta;
}
一个更清洁的例子
body{
background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
background-position:200px 100px;
background-size:600px 400px;
background-repeat:no-repeat;
}
这不起作用
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}
这也行不通
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}
background-image
代替background
但在FF5和IE8中均无效。(是的,对于过时的浏览器:D)
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
您可以这样做:
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
在FF5和Opera中起作用,但在IE8中不起作用。
多背景 CSS多背景属性用于一次添加一个或多个图像而不使用HTML代码。我们可以根据我们的要求添加图像。多背景图像的示例语法如下 - #multibackground { background-image: url(/css/images/logo.png), url(/css/images/border.png); background-position: left top, lef
问题内容: 我正在尝试将背景图像设置为延伸到的宽度和高度的整个范围。该会是可变大小的,所以我用 我无法弄清楚如何将其放在这种简写形式中并使之起作用。如果我独立列出每个属性,则可以正常工作,但是我希望有一个多合一的解决方案。 这可行,但不是首选: 问题答案: 根据W3和MDN,需要使用斜线将背景大小与背景位置分开: W3C示例: MDN: 必须在背景位置之后指定此属性,并用’/’字符分隔。
CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持
我想知道这些属性之间的主要区别是什么 和 以上两个属性的结果是相同的,显示背景图像,我们也可以这样设置颜色 和 以上两种属性都会产生浅灰色的背景色,那么这些属性之间的主要区别是什么?
尽管CSS允许给任何元素添加背景,但通常用在块级元素上。 背景属性应用在目标元素上,不过考虑到大部分HTML元素是具有透明背景的,那么在 body 上应用一个背景色,看起来将是给所有透明背景元素添加了一个默认背景。 背景色(background-color) 缺省值:transparent 可被子元素继承:不能。 我们在CSS颜色单位课程中已经学习过如何定义颜色,背景色也一样: body{ bac
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。 以下是正文。 background系列属性 常见背景属性 CSS样式中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。