Tôi muốn có thể thay đổi hình nền trang web theo độ phân giải màn hình mà người dùng sử dụng:Đặt hình nền theo độ phân giải màn hình
nếu độ phân giải màn hình lớn hơn hoặc bằng 1200 * 600 rồi nền = mybackground.jpg không lặp lại hoặc người nào khác. Tôi có thể làm cái này như thế nào?
Phương pháp CSS nguyên bản hoạt động rất tốt được thảo luận here. Hai kỹ thuật được kiểm tra đặc biệt và cá nhân tôi thích thứ hai vì nó không phụ thuộc CSS3, phù hợp với nhu cầu của riêng tôi tốt hơn.
Nếu hầu hết/tất cả lưu lượng truy cập của bạn có trình duyệt có khả năng CSS3, phương pháp đầu tiên nhanh hơn và sạch hơn để thực hiện (sao chép/dán bởi Mr. Zoidberg trong câu trả lời khác để thuận tiện, mặc dù tôi truy cập the source về lý do tại sao nó hoạt động).
Một phương pháp thay thế cho CSS là sử dụng thư viện JavaScript jQuery để phát hiện các thay đổi về độ phân giải và điều chỉnh kích thước hình ảnh cho phù hợp. This article bao gồm kỹ thuật jQuery và cung cấp bản trình diễn trực tiếp.
Supersized là thư viện JavaScript chuyên dụng được thiết kế cho hình ảnh toàn màn hình tĩnh cũng như trình chiếu có kích thước đầy đủ.
Mẹo hay cho hình ảnh toàn màn hình là chia tỷ lệ chúng với tỷ lệ chính xác trước. Tôi thường nhắm đến kích thước 1500x1000 khi sử dụng supersized.js hoặc 1680x1050 cho các phương pháp khác, đặt chất lượng jpg cho ảnh từ 60-80% dẫn đến kích thước tệp trong vùng 100kb trở xuống nếu có thể mà không ảnh hưởng đến chất lượng quá nhiều .
Hi heres phiên bản javascript thay đổi hình nền src theo độ phân giải màn hình. Bạn phải lưu các hình ảnh khác nhau ở đúng kích cỡ.
<html>
<head>
<title>Javascript Change Div Background Image</title>
<style type="text/css">
body {
margin:0;
width:100%;
height:100%;
}
#div1 {
background-image:url('sky.jpg');
width:100%
height:100%
}
p {
font-family:Verdana;
font-weight:bold;
font-size:11px;
}
</style>
<script language="javascript" type="text/javascript">
function changeDivImage()
{
//change the image path to a string
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;
//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;
//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
{
document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
}
else if (custWidth <= 800)
{
document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
}
else if (custWidth <= 1024)
{
document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
}
else if (custWidth <= 1280)
{
document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
}
else if (custWidth <= 1600)
{
document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
}
else {
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
/*if(imgPath == "url(sky.jpg)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";
}*/
}
</script>
</head>
<body onload="changeDivImage()">
<div id="div1">
<p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>
<p>paragraph</p>
</div>
<br/>
</body>
</html>
Tôi biết câu hỏi quá cũ nhưng được cho là đã trả lời, nó có thể giúp ích cho ai đó. Nếu bạn nhìn thấy twitter, bạn sẽ tìm thấy một cái gì đó rất khó khăn nhưng tinh khiết phương pháp tiếp cận css để đạt được điều này.
<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
background: none repeat scroll 0 0 #FFFFFF;
height: 200%;
left: -50%;
position: fixed;
width: 200%;}
.background img{
bottom: 0;
display: block;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
right: 0;
top: 0;}
Hình nền này phù hợp với mọi kích cỡ. thậm chí xem chân dung của ipad. nó luôn điều chỉnh hình ảnh ở chính giữa. nếu bạn thu nhỏ; hình ảnh sẽ vẫn giữ nguyên.
Xóa "mã hình nền cơ thể" của bạn rồi dán mã này:
html {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
đây là câu trả lời hay –
Tôi đã có vấn đề này cùng nhưng bây giờ đã tìm thấy các giải pháp cho nó.
Bí quyết là tạo hình nền có độ phân giải 1920 * 1200. Khi bạn áp dụng hình nền này cho các máy khác nhau, Windows 7 sẽ tự động thay đổi kích thước để phù hợp nhất.
Hy vọng điều này sẽ giúp bạn tất cả
Set thân css để:
body {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Đưa vào tập tin css:
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; }
URL images/bg.jpg là hình nền của bạn
hoặc người nào khác? Ý của bạn là: 'hoặc else background = myalternatebackground.jpg no-repeat' –
truy vấn phương tiện trong css3 – kim366