text 使背景图像适应CSS中的屏幕分辨率
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 使背景图像适应CSS中的屏幕分辨率相关的知识,希望对你有一定的参考价值。
@media (max-width: 320px) {
body {
background-image: url('images/background_320.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 321px) and (max-width: 1023px) {
body {
background-image: url('images/background_1024.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
body {
background-image: url('images/background_1024.jpg');
background-repeat:no-repeat;
}
}
@media (min-width: 1280px) and (max-width: 1365px) {
body {
background-image: url('images/background_1280.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 1366px) {
body {
background-image: url('images/background_1920.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
以上是关于text 使背景图像适应CSS中的屏幕分辨率的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 CSS 拉伸图像以适应屏幕并保持纵横比?
css 如何固定网页背景,并且自动适应浏览器大小!
CSS使图像调整大小并适合任何屏幕
根据屏幕分辨率显示自定义背景图像
使用@media screen实现网页适应不同的分辨率
如何使背景图像适合所有屏幕尺寸?