Kích thước nền CSS3: bìa không làm ảnh bìa theo chiều dọc

Tôi đang cố tạo một trang web có hình nền mà tôi muốn luôn lấp đầy toàn bộ màn hình.Kích thước nền CSS3: bìa không làm ảnh bìa theo chiều dọc

Khi cửa sổ trình duyệt ngắn và rộng, tôi muốn hình ảnh mở rộng sao cho phần trên cùng của nó lấp đầy toàn bộ màn hình, và phần còn lại của nó không hiển thị.

Khi cửa sổ trình duyệt cao và mỏng, tôi muốn hình ảnh mở rộng sao cho phần bên trái của nó lấp đầy toàn bộ màn hình cao và phần còn lại của nó không hiển thị.

Sử dụng kích thước nền CSS3: thuộc tính cover làm cho tác phẩm cũ giống như nét duyên dáng, thuộc tính sau không hoạt động. Thay vào đó, hình nền được thu nhỏ sao cho nó hoàn toàn có thể nhìn thấy trong vùng hẹp có sẵn và được chia tỷ lệ theo chiều rộng, và sau đó phần còn lại của trang bên dưới nó đơn giản là màu nền.

body { 
    background-color: #BF6F30; 
    color: black; 
    font-family: Georgia, "Times New Roman", sans-serif; 
    background: url(' ... '); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Làm cách nào để khắc phục sự cố này?

Nguồn

2012-01-22 Andrew Latham

Bạn có thể đăng mã của mình không? Đó không phải là những gì đang xảy ra! – skybondsor

Chắc chắn, tôi chỉ thực hiện –

Địa chỉ này có cùng vấn đề với bạn không? http://stackoverflow.com/questions/8217037/css3-background-size-can-i-guarantee-coverage – skybondsor

Bạn chỉ quan tâm đến việc sử dụng hình nền CSS? Điều này có thể được thực hiện bằng cách tải một hình ảnh và hạn chế nó bằng CSS.

Một trong hai ví dụ này có hoạt động không?

HTML

<body id="page-body"> 
<img class="bg" src="images/bodyBackground1.jpg"> 
<div class="wrapper"> 


</div> 
</body>

CSS

html { 
     background: url(images/bodyBackground1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

body { 
    background:#fff; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
} 

html, body { 
    height: 100%; 
} 

img.bg { 
     /* Set rules to fill background */ 
     min-height: 100%; 
     min-width: 1024px; 

     /* Set up proportionate scaling */ 
     width: 100%; 
     height: auto; 

     /* Set up positioning */ 
     position: fixed; 
     top: 0; 
     left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
     img.bg { 
       left: 50%; 
       margin-left: -512px; /* 50% */ 
     } 
}

Hoặc này? Cái này tải hình ảnh từ một cơ sở dữ liệu vào một mảng và tải chúng một cách ngẫu nhiên, nhưng bạn có thể có thể để thu thập một số thông tin từ này:

chức năng tải PHP

<?php 
    $bg_images = array(
     0 => 'comp1.png', 
     1 => 'comp2.png', 
     2 => 'comp3.png', 
     .... 
    ); 
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; 
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; 
?>

HTML

... 
<body> 
<?php echo $showBG; ?> 
<div id="wrapper"> 
...

CSS

html, body { 
    margin:0; 
    height:100%; 
} 

img.source-image { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
    min-width:1024px; 
}

Các tùy chọn này sẽ lấp đầy cửa sổ trình duyệt theo chiều cao và chiều rộng.

Nguồn

2012-01-24 02:32:24

body { background: url("...") no-repeat center center fixed; background-size: cover; }

Nguồn

2015-04-20 12:51:40 Habax

Kích thước nền CSS3: bìa không làm ảnh bìa theo chiều dọc

Trả lời

Các vấn đề liên quan