当前位置: 首页 > 面试题库 >

速记背景属性(CSS3)中的background-size

李辉
2023-03-14
问题内容

我正在尝试在属性不足的属性中混合使用background-imagebackground-size属性background。基于W3C的文档
background-sizebackground-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) }

但这是行不通的!还不清楚如何backgroundbackground-size和分别background-position具有background-position-xbackground-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;
}

问题答案:
  1. 您的jsfiddle使用background-image代替background
  2. 似乎是“此浏览器尚不支持”的情况。

但在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); 将图像设置为背景。