[英]Reduce but not increase background size
background: #344b68 url(../../data/img/template/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Hello once again Stackoverflow, I have the following question. 您好,我再次Stackoverflow,我有以下问题。
Background.jpg is my websites background picture, wich is in 1080p
resolution (1920x1080). Background.jpg是我的网站背景图片,分辨率为
1080p
(1920x1080)。 On the border of the image, it fades to #344b68
. 在图像的边界上,它渐
#344b68
为#344b68
。
Viewing this on a 720p
monitor will cause the picture to reduce in size using background-size: cover
but this will also be increased when viewing this on for example 1440p
resolutions. 在
720p
监视器上观看该照片会导致使用background-size: cover
缩小图片background-size: cover
但是在以1440p
分辨率观看时,该background-size: cover
也会增加。
Now what I want to do is when it's a 720p
monitor reduce the image' dimensions with background-size: cover
to fit, but when its above 1080p
, it stays the same dimentions and just fades in with the static background color ( #344b68
). 现在我想做的是当它是
720p
显示器时,以background-size: cover
减小图像background-size: cover
以适合,但当其高于1080p
,它保持不变的background-size: cover
,并且仅以静态背景#344b68
( #344b68
) 。
How can I do this, preferibly without JS? 我该如何做,最好是没有JS?
Thanks in advance! 提前致谢!
This looks like a job for Media Queries ! 这看起来像是媒体查询的工作! These are a CSS3 feature that let you specify code to only activate when certain conditions are met.
这些是CSS3功能,可让您指定仅在满足某些条件时激活的代码。 In your case, you want to query the window width:
您要查询的窗口宽度:
/* normal styles */
.item-with-background {
background-size: contain;
}
/* overrides when screen is 720px wide or smaller */
@media screen and (max-width: 720px) {
.item-with-background {
background-size: cover;
}
}
Note: Media queries are supported in basically all the browsers (including mobile) except IE 6/7/8. 注意:除了IE 6/7/8之外,基本上所有浏览器(包括移动设备)都支持媒体查询。 If you REALLY need to have media queries in use in those browsers, there are some polyfills that hack-in that ability.
如果您确实需要在这些浏览器中使用媒体查询, 则可以使用某些polyfill来破解该功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.