我正在处理一个基本的 html 页面,我有这个背景图片 bg.jpg。但问题在于您拥有的屏幕尺寸和屏幕有多少像素我无法查看我想要的整个背景图像。
如何使背景固定,以便您可以看到整个背景?
我正在处理一个基本的 html 页面,我有这个背景图片 bg.jpg。但问题在于您拥有的屏幕尺寸和屏幕有多少像素我无法查看我想要的整个背景图像。
如何使背景固定,以便您可以看到整个背景?
你可以这样做:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
你可以在这里阅读更多:链接
如果您的意思是整页背景图片,那么您可以简单地使用 CSS3background-size
属性
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
如果你需要附加它,有点固定,不应该滚动,而不是使用
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
删除您的“身体背景图像代码”,然后粘贴此代码:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
您可以使用 CSS 伪选择器。
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
当然,其他解决方案也可以,但它们只适用于最新的现代浏览器。这种伪选择解决方案适用于当今使用的大多数浏览器。如果你想支持更老的浏览器,比如旧版本的 IE,那么你可以使用 div 来包含背景图像并根据需要设置它的样式。