我在 CSS 中的
background-image:url
上有一个body
。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的纵向背景,我想使用。主要是,在我的例子中,“面向肖像”实际上只是转化为移动设备,而不是 ipad/平板电脑。由于长度和宽度之间的差异,手机更加极端,所以在这种情况下我想链接一个不同的 url。
Idk 如果有任何方法我可以使用 Bootstrap 的 .hidden-xs/.visible-xs 来完成这个,那只是我的想法,但如果有人有使用它的解决方案,我会很高兴听到它。这也会有所帮助,因为我正在使用 Bootstrap 的导航栏,它在
xs
时变成触摸屏导航栏,意思是<768px, So I'd like to only change the background image when the navbar changes.
有什么想法吗?在这一点上我完全是个新手,这是我的第一个真正的项目,它不仅仅是孤立的片段。这可能适用于 Java,但 idk。我很乐意提供任何帮助。
还有一个快速的半相关问题,我如何处理
background-position: center (-50px from the top)
。我应该只拍摄我想使用的照片并在顶部添加 50px 的空白并用油漆或其他任何东西然后上传吗?或者设置它的方法是 CSS?
使用
@media
查询来编写特定于窗口大小的 css。例子:
@media (min-width: 400px) {
.element {
background: #cccccc;
}
}
@media (min-width: 500px) {
.element {
background: #888888;
}
}
@media (min-width: 600px) {
.element {
background: #222222;
}
}
这是一个小提琴:http://jsfiddle.net/zhqn1vhh/
你可以在自己的 CSS 上有这样的东西:
@media (max-width: 300px) {
body {
background-color: red;
background-image: image-url("http://placekitten.com/g/200/300");
}
}
@media (min-width: 301px) and (max-width: 600px) {
body {
background-color: blue;
background-image: image-url("http://placekitten.com/g/400/600");
}
}
@media (min-width: 601px) and (max-width: 768px) {
body {
background-color: yellow;
background-image: image-url("http://placekitten.com/g/500/768");
}
}
@media (min-width: 769px) {
body {
background-color: green;
background-image: image-url("http://placekitten.com/g/800/1048");
}
}
<body>
html body
</body>
我使用引导程序这样做。但我确定它可以在没有引导程序的情况下工作。
.class {
background-image: image-url("beach.jpg") ;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}
为了实现媒体查询,对于不同的屏幕尺寸,直接在包含源标签的HTML中使用标签是更好更专业的意见。
请在下面找到此方法的实施示例:
<picture>
<source srcset="small-image.jpg" media="(max-width: 375px)">
<source srcset="main-image.jpg">
<img src="main-image.jpg" alt="" style="width:auto;">
</picture>