更具体地说,是否可以使用css3的transform:scale(x,y)缩放平铺背景图像
发布于 2012-08-03 14:52:25
虽然不能使用transform:scale(),但如果您知道所需背景图像的最终大小,则可以使用background-size来获得相同的效果。
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}然而,如果你总是想要,比方说,将你用作背景的图像的宽度“加倍”,那么在这个时候似乎不太可能。
EDIT:请注意,虽然背景大小样式支持基于%的参数,但它不是图像大小的百分比,而是窗口的大小。
发布于 2012-08-03 14:43:14
您可以使用:
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}发布于 2012-08-03 14:40:48
我不擅长CSS。但这只是一个想法:创建带有平铺背景的背景div (使用z-index)并缩放它。它应该是可行的
https://stackoverflow.com/questions/11790527
复制相似问题