Question

我正在与以下css联系我们。

border:30px solid #fff;
background-clip: content-box;
height:100%;
background:url(../Gallery_files/back.png); 
background-position: center;     
background-repeat:no-repeat;
background-size:cover;  
background-attachment: fixed;
overflow-y: inherit;
z-index:1;

问题是，我能够获得适合屏幕的整个图像的边框，但是在屏幕尺寸之后，边框会被切割（有滚动，一旦我向下滚动，边框不会出现）

Answer 1

这不是向<body>标记添加边框的正确方法。检查this link以获取一些示例。

Answer 2

不滚动

html,body{
border:30px solid #fff;
background-clip: content-box;
height:87%;
background: url(img1.jpg); 
background-position: center;     
background-repeat:no-repeat;
background-size:cover;  
background-attachment: fixed;
overflow-y: inherit;
z-index:1; 
    }

滚动

.scroll-box {
    background: #f4f4f4;
    width: 900px;
    margin:100px;
    height: 700px; 
    padding: 15px;
    border:30px solid #000;
    background: url(cat.jpg);
    background-size:cover; 
 }

<body>
   <div class="scroll-box">
 </div>
</body>

背景图象的边界与滚动一起

2 个答案: