Saya ingin bahwa saya gambar latar belakang peregangan dan skala tergantung pada browser ukuran viewport.
I've melihat beberapa pertanyaan pada Stack Overflow yang melakukan pekerjaan, seperti Peregangan dan skala CSS background misalnya. Ia bekerja dengan baik, tapi saya ingin menempatkan gambar dengan menggunakan latar belakang
, tidak dengan img
tag.
Dalam salah satu img
tag ditempatkan, dan kemudian dengan CSS kita penghormatan kepada img
tag.
width:100%; height:100%;
Ia bekerja, tetapi pertanyaan itu agak lama, dan menyatakan bahwa dalam CSS 3 resize gambar latar belakang akan bekerja cukup baik. I've mencoba ini contoh yang pertama, tapi itu tidak't bekerja untuk saya.
Apakah ada metode yang baik untuk melakukannya dengan background-image
deklarasi?
CSS3 memiliki sedikit bagus atribut yang disebut background-size:cover
.
Ini skala gambar sehingga latar belakang daerah benar-benar tertutup oleh gambar latar belakang dengan tetap menjaga aspek rasio. Seluruh daerah akan dibahas. Namun, bagian dari gambar mungkin tidak terlihat jika lebar/tinggi dari gambar tersebut terlalu besar.
Anda bisa menggunakan CSS3 properti untuk melakukannya cukup baik. Mengubah ukuran rasio sehingga tidak ada distorsi gambar (meskipun tidak mewah gambar kecil). Sekedar catatan, it's tidak diterapkan di semua browser belum.
background-size: 100%;
Menggunakan kode yang saya sebutkan...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Yang menghasilkan efek yang diinginkan: hanya isi akan bergulir, bukan latar belakang.
Gambar latar belakang untuk mengubah ukuran browser viewport untuk setiap ukuran layar. Ketika konten yang doesn't fit browser viewport, dan kebutuhan pengguna untuk menggulir halaman, gambar latar belakang masih tetap di viewport sedangkan kandungan gulungan.
Dengan CSS 3 tampaknya ini akan menjadi jauh lebih mudah.
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
Berikut CSS bagian harus meregangkan gambar dengan semua browser.
Saya lakukan ini secara dinamis untuk setiap halaman. Oleh karena itu saya menggunakan PHP untuk menghasilkan tag HTML-nya sendiri untuk masing-masing halaman. Semua gambar yang di 'gambar' folder dan berakhir dengan 'Bg.jpg'.
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
Jika anda hanya memiliki satu gambar latar belakang untuk semua halaman, maka anda dapat menghapus $pic
variabel, menghapus melarikan diri kembali-garis miring, menyesuaikan jalur dan menempatkan kode ini di file CSS.
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
Ini diuji dengan Internet Explorer 9, Chrome 21, dan Firefox 14.
Anda dapat benar-benar mencapai efek yang sama sebagai latar belakang gambar dengan tag img. Anda hanya perlu mengatur z-index yang lebih rendah dari segala sesuatu yang lain, mengatur posisi:absolut dan menggunakan latar belakang transparan untuk setiap kotak di latar depan.
Hal ini dijelaskan oleh CSS trik: Pilihan Latar belakang Halaman Penuh Gambar
Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Kode:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Anda dapat menambahkan kelas ini ke dalam file CSS.
.stretch {
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;
}
Bekerja di:
background-size
, tapi bukan kata kunci)Dalam rangka untuk skala gambar yang tepat berdasarkan ukuran wadah, gunakan kode berikut:
background-size: contain;
background-repeat: no-repeat;
Saya menggunakan ini, dan ia bekerja dengan semua browser:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
Saya setuju dengan gambar di mutlak div dengan 100% lebar dan tinggi. Pastikan anda mengatur 100% lebar dan tinggi untuk tubuh dalam CSS dan mengatur margin dan padding ke nol. Masalah lain yang anda akan menemukan dengan metode ini adalah bahwa ketika memilih teks, daerah pemilihan kadang-kadang dapat mencakup latar belakang gambar, yang memiliki efek menguntungkan dari membuat halaman penuh memiliki negara yang dipilih. Anda bisa mendapatkan putaran ini dengan menggunakan user-select:none
CSS rule, seperti:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
Sekali lagi, Internet Explorer adalah orang jahat di sini, karena itu doesn't mengenali pengguna-pilih option - bahkan tidak Internet Explorer 10 preview mendukung hal itu, sehingga anda memiliki pilihan baik menggunakan JavaScript untuk mencegah gambar latar belakang pemilihan (misalnya, http://www.felgall.com/jstip35.htm ) atau menggunakan CSS 3 latar belakang-metode peregangan.
Juga, untuk SEO aku akan menempatkan gambar latar belakang pada bagian bawah halaman, tapi jika gambar latar belakang waktu terlalu lama untuk memuat (yaitu, dengan latar belakang putih awalnya), anda bisa pindah ke bagian atas halaman.
Terima kasih!!!
Tapi kemudian itu tidak bekerja untuk Google Chrome dan Safari browser (peregangan bekerja, tetapi hight gambar-gambar itu hanya 2 mm!), sampai seseorang mengatakan kepada saya apa yang kurang:
Cobalah untuk mengatur
height:auto;min-height:100%;
Jadi perubahan yang anda height:100%;
line, memberikan:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
Sebelum yang baru ditambahkan kode yang saya miliki ini saya Drupal Tendu tema gaya.css
:
html, body{height:100%;}
#halaman{background:#ffffff; height:auto !penting;height:100%;min-height:100%;position:relative;}
Maka saya harus membuat blok baru dalam Drupal dengan gambar sambil menambahkan class=stretch
:
< img alt="" class="peregangan" src="pic.url" />
Hanya menyalin gambar dengan editor di Drupal blok doesn't bekerja, seseorang harus mengubah editor untuk non-teks yang diformat.
Saya ingin pusat dan skala gambar latar belakang, tanpa peregangan untuk seluruh halaman, dan saya ingin rasio aspek yang harus dipertahankan. Ini bekerja untuk saya, terima kasih untuk variasi yang disarankan dalam jawaban yang lain:
INLINE GAMBAR: ------------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS ----------------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
Saya menggunakan kombinasi dari belakang-X properti CSS untuk mencapai cita-skala gambar latar belakang.
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
Hal ini membuat latar belakang yang selalu menutupi seluruh jendela browser dan tetap berpusat ketika scaling.
Gunakan Backstretch plugin. Orang bahkan bisa memiliki beberapa gambar slide. Ia juga bekerja dalam wadah. Cara ini misalnya, seseorang bisa saja hanya sebagian dari latar belakang yang telah ditutupi dengan gambar latar belakang.
Karena bahkan aku bisa mendapatkannya untuk bekerja membuktikan hal itu menjadi mudah untuk menggunakan plugin ini :).
Anda dapat menggunakan border-image : yourimage
properti untuk skala gambar hingga ke perbatasan. Bahkan jika anda memberikan latar belakang-gambar, perbatasan gambar akan ditarik lebih dari itu.
Perbatasan-gambar
properti ini sangat berguna jika anda style sheet ini dilaksanakan di suatu tempat yang doesn't dukungan CSS 3. Jika anda menggunakan Google Chrome atau Firefox, kemudian saya merekomendasikan background-size:cover
properti itu sendiri.