每一面的背景图像都可见
Background-image on every side visible
我有以下背景图片,里面有内容:Image
我希望边框始终在每一侧都可见。
.itembox {
background: url(http://wowimg.zamimg.com/images/wow/tooltip.png);
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 60%;
padding: 8px;
我试过这个:
background-size: 100% 100%;
background-repeat: no-repeat
试试这个:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
更新:
在你的 .itembox
css 中,我只添加了这个:
background-size: 100% 100%;
(没有 background-repeat
)这似乎对我有用。
不过我很好奇,如果你真的想使用那个特定的图像作为背景,那么只定义一个 background-color
和一个 border
和一个 [= 不是更容易吗? 16=]?如果像这样拉伸图像,边框看起来就不太好看了...
原因:
随着包含该图像的 div 尺寸的增大,您在图像周围看到的白线会变得越来越清晰。随着包含图像的 div 变小,您会注意到线条消失了,因为 最小测量单位 是
`1 pixel`
小于该值的任何内容都不会显示在浏览器中
这是您看到白线的快照
body{
background:blue;
}
.itembox {
background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 500px;
height:1000px;
padding: 8px;
background-repeat: no-repeat;
background-size: cover;
}
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>
这是一个快照,其中浏览器未能显示该白线,因为该线的相对大小与 div
的大小相比
body{
background:blue;
}
.itembox {
background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 50px;
height:100px;
padding: 8px;
background-repeat: no-repeat;
background-size: cover;
}
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>
我有以下背景图片,里面有内容:Image
我希望边框始终在每一侧都可见。
.itembox {
background: url(http://wowimg.zamimg.com/images/wow/tooltip.png);
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 60%;
padding: 8px;
我试过这个:
background-size: 100% 100%;
background-repeat: no-repeat
试试这个:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
更新:
在你的 .itembox
css 中,我只添加了这个:
background-size: 100% 100%;
(没有 background-repeat
)这似乎对我有用。
不过我很好奇,如果你真的想使用那个特定的图像作为背景,那么只定义一个 background-color
和一个 border
和一个 [= 不是更容易吗? 16=]?如果像这样拉伸图像,边框看起来就不太好看了...
原因:
随着包含该图像的 div 尺寸的增大,您在图像周围看到的白线会变得越来越清晰。随着包含图像的 div 变小,您会注意到线条消失了,因为 最小测量单位 是
`1 pixel`
小于该值的任何内容都不会显示在浏览器中
这是您看到白线的快照
body{
background:blue;
}
.itembox {
background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 500px;
height:1000px;
padding: 8px;
background-repeat: no-repeat;
background-size: cover;
}
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>
这是一个快照,其中浏览器未能显示该白线,因为该线的相对大小与 div
的大小相比body{
background:blue;
}
.itembox {
background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 12px;
line-height: 17px;
color: white;
float: left;
width: 50px;
height:100px;
padding: 8px;
background-repeat: no-repeat;
background-size: cover;
}
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>