我有
body {
background: url(images/background.svg);
}
希望达到的效果是,这个背景图片的宽度等于页面的宽度,高度变化以保持比例。例如,如果原始图片刚好是100*200(任何单位),而主体是600px宽,背景图片最终应该是1200px高。如果窗口被调整大小,高度应该自动改变。这可能吗?
目前,Firefox看起来好像是让高度适合,然后再调整宽度。这也许是因为高度是最长的尺寸,它在试图避免裁剪?我想垂直裁剪,然后滚动:没有水平重复。
另外,Chrome浏览器将图像放在中心位置,没有重复,即使明确给出background-repeat:repeat
,这也是默认的。
这方面有一个CSS3属性,即background-size
(兼容性检查)。虽然人们可以设置长度值,但它通常与特殊值contain
和cover
一起使用。在你的具体案例中,你应该使用cover
。
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
and cover
。对不起,我想用Biswarup Ganguly的每日图片来演示。假设这是你的屏幕,而灰色区域在你的可见屏幕之外。为了演示,我将假设16x9的比例。
画面]3。
我们想用前面提到的当天的图片作为背景。然而,由于某种原因,我们将图片裁剪成4x3。我们可以将background-size
属性设置为某个固定的长度,但我们将专注于contain
和cover
。请注意,我还假设我们没有篡改body
的宽度和/或高度。
contain
包含 缩放图片,同时保留其固有的长宽比(如果有的话),使其宽度和高度都能适应背景定位区域的最大尺寸。
这确保了背景图像总是完全包含在背景定位区域内,然而,在这种情况下,可能会有一些空隙被你的`背景色'填满。
cover
覆盖 缩放图像,同时保留其固有的长宽比(如果有的话),使其宽度和高度都能完全覆盖背景定位区的最小尺寸。
这确保了背景图像覆盖了一切。将不会有可见的 "背景色",但是根据屏幕的比例,你的图像的很大一部分可能被切掉。
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
<!--结束片段-->。
根据来自https://developer.mozilla.org/en-US/docs/CSS/background-size 的提示,我最终得到了以下对我有用的配方
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
我不确定你到底在寻找什么,但你真的应该看看CSS-Tricks的Chris Coyier所写的这些优秀的博客文章。
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
阅读每篇文章的描述,看看它们是否是你要找的东西。
第一篇文章回答了以下问题。
有什么办法可以使背景图片的大小调整?比如说,无论浏览器窗口的大小如何,都可以用图像从边缘到边缘填充网页的背景。另外,随着浏览器窗口的变化,它的大小也可以调整。同时,要确保它能保持其比例(不会有奇怪的拉伸)。另外,不会造成滚动条,只是在需要时垂直切断。另外,在页面上以内联标签形式出现。
第二篇文章的目标是获得以下内容,即一个网站上的背景图片在任何时候都能覆盖整个浏览器窗口的"。
希望这对你有帮助。
试试这个
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
就加这一行。
.your-class {
height: 100vh;
}
vh为视口高度。 这将自动缩放以适应设备'。 浏览器窗口。
在这里查看更多。 https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window?rq=1
背景图片没有设置完美,那么他的css就有问题,所以他的css文件改成以下代码。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
<!--结束片段-->
%; background-size: 100% 100%;"。
我也有同样的问题,调整浏览器尺寸时无法调整图片大小。
坏码:
<br>。
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
好码:
<br>。
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
这里的关键是增加了这个元素->。 background-size: contain;
这里'是对我有用的。
background-size: auto 100%;