Có thể đặt kích thước của hình nền bằng CSS không?
Tôi muốn làm một cái gì đó như:
background: url('bg.gif') top repeat-y;
background-size: 490px;
Nhưng có vẻ như hoàn toàn sai khi làm điều đó ...
Câu trả lời:
Nếu bạn cần làm cho hình ảnh lớn hơn, bạn phải chỉnh sửa hình ảnh trong trình chỉnh sửa hình ảnh.
Nếu bạn sử dụng thẻ img, bạn có thể thay đổi kích thước, nhưng điều đó sẽ không mang lại cho bạn kết quả mong muốn nếu bạn cần hình ảnh làm nền cho một số nội dung khác (và nó sẽ không lặp lại như bạn muốn) ...
Điều này có thể làm trong CSS3 với background-size.
Tất cả các trình duyệt hiện đại đều hỗ trợ điều này, vì vậy trừ khi bạn cần hỗ trợ các trình duyệt cũ, đây là cách để thực hiện.
Các trình duyệt được hỗ trợ:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) và Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
Đặc biệt, tôi thích covervà containcác giá trị mang lại cho chúng ta sức mạnh kiểm soát mới mà trước đây chúng ta không có.
Bạn cũng có thể sử dụng background-size: roundcó nghĩa kết hợp với lặp lại:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
Điều này sẽ điều chỉnh độ rộng hình ảnh để nó phù hợp với toàn bộ số lần trong khu vực định vị nền.
Lưu ý bổ sung
Nếu kích thước bạn cần là kích thước pixel tĩnh, vẫn rất thông minh để thay đổi kích thước vật lý của hình ảnh thực tế. Điều này vừa để cải thiện chất lượng thay đổi kích thước (cho rằng phần mềm hình ảnh của bạn hoạt động tốt hơn trình duyệt) và để tiết kiệm băng thông nếu hình ảnh gốc lớn hơn những gì sẽ hiển thị.
Chỉ CSS 3 hỗ trợ điều đó,
background-size: 200px 50px;Nhưng tôi sẽ tự chỉnh sửa hình ảnh để người dùng cần tải ít hơn và nó có thể trông đẹp hơn hình ảnh được thu nhỏ mà không khử răng cưa.
background: url('resized_image.png')\9;cho IE lt 9
Nếu người dùng của bạn chỉ sử dụng Opera 9.5+, Safari 3+, Internet Explorer 9+ và Firefox 3.6+ thì câu trả lời là có. Mặt khác, không.
Các nền có kích thước bất động sản là một phần của CSS 3, nhưng nó sẽ không hoạt động trên hầu hết các trình duyệt.
Đối với mục đích của bạn chỉ cần làm cho hình ảnh thực tế lớn hơn.
Không thể được . Nền sẽ luôn lớn như có thể, nhưng bạn có thể ngăn nó lặp lại với background-repeat.
background-repeat: no-repeat;Thứ hai, nền không đi vào khu vực lề của hộp, vì vậy nếu bạn muốn có nền chỉ nằm trên nội dung thực tế của hộp, bạn có thể sử dụng lề thay vì đệm.
Thứ ba, bạn có thể kiểm soát nơi hình ảnh nền bắt đầu. Theo mặc định, đó là góc trên cùng bên trái của hộp, nhưng bạn có thể điều khiển nó bằng background-position, như thế này:
background-position: center top;hoặc có lẽ
background-position: 20px -14px;Định vị tiêu cực được sử dụng rất nhiều với các họa tiết CSS .
Có một đối số bị lãng quên :
background-size: contain;Điều này sẽ không kéo dài của bạn background-imagenhư nó sẽ làm với cover. Nó sẽ kéo dài cho đến khi cạnh dài hơn đạt đến chiều rộng hoặc chiều cao của thùng chứa bên ngoài và do đó giữ được hình ảnh.
Chỉnh sửa: Cũng có -webkit-background-sizevà -moz-background-size.
Thuộc tính kích thước nền được hỗ trợ trong IE9 +, Firefox 4+, Opera, Chrome và Safari 5+.
Để hỗ trợ cho câu trả lời mà @tetra đưa ra, tôi muốn chỉ ra rằng nếu hình ảnh là một SVG, thì việc thay đổi kích thước hình ảnh thực tế là không cần thiết.
Vì tệp SVG chỉ là XML, bạn có thể chỉ định bất kỳ kích thước nào bạn muốn nó xuất hiện trong XML.
Tuy nhiên, nếu bạn đang sử dụng cùng một hình ảnh SVG ở những nơi khác nhau và cần nó có kích thước khác nhau, thì việc sử dụng background-sizelà rất hữu ích. Các tệp SVG vốn đã nhỏ hơn hình ảnh raster dù sao và thay đổi kích thước nhanh chóng bằng CSS có thể rất hữu ích mà không phải trả bất kỳ chi phí hiệu năng nào mà tôi biết và chắc chắn sẽ không làm giảm chất lượng.
Đây là một ví dụ nhanh:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Lưu ý: điều này hoạt động với tôi trong OS X 10.7 với Firefox 8, Safari 5.1 và Chrome 16.0.912.63)
Bạn hoàn toàn có thể với CSS3:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Điều này sẽ kích thước hình ảnh nền tới 100% chiều rộng của phần tử cơ thể và sau đó sẽ điều chỉnh lại kích thước nền cho phù hợp khi phần tử cơ thể thay đổi kích thước cho độ phân giải nhỏ hơn.
Dưới đây là ví dụ: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Chỉ cần các div lồng nhau để tương thích trình duyệt chéo
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Bạn có thể sử dụng hai <div>yếu tố:
Một là một thùng chứa (nó là cái mà ban đầu bạn muốn hình nền xuất hiện).
Cái thứ hai được chứa trong. Bạn đặt kích thước của nó thành kích thước của hình nền (hoặc kích thước bạn muốn xuất hiện).
Các div chứa sau đó được thiết lập để được định vị absolute. Bằng cách này, nó không can thiệp vào dòng chảy bình thường của các mục trong div chứa.
Nó cho phép bạn sử dụng hình ảnh sprite hiệu quả.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Bạn đã viết
background: url('bg.gif') top repeat-y;
background-size: 490px;nhưng bạn sẽ chỉ nhìn thấy nền tùy thuộc vào kích thước của container.
nếu bạn có một thùng chứa trống với url nền và kích thước nền là gì, bạn sẽ không thấy bg.gif.
Nếu bạn đặt kích thước của lục địa thành
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;kết hợp với mã bạn đã viết ở trên, bạn sẽ có thể thấy tệp bg.gif.
Tôi sử dụng hình nền cho các nút, nhưng nó chỉ hiển thị hình ảnh có cùng kích thước với văn bản, ngay cả khi tôi đặt chiều rộng và chiều cao. Thay vào đó, tôi đệm văn bản của mình bằng các ký tự (khoảng trắng không phá vỡ). Tôi tát vào càng nhiều càng tốt, về cơ bản, cho đến khi tất cả các nút nền xuất hiện. Vì vậy, tôi có thể có mã như thế này:
Trong biểu định kiểu:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}Trong tài liệu HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Ví dụ:
Ảnh nền sẽ luôn vừa với kích thước vùng chứa (chiều rộng 100% và chiều cao 100px).
CSS trình duyệt chéo:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
Điều này có thể thực hiện trong CSS3 với kích thước nền
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Nếu bạn muốn đặt background-sizetrong cùng một thuộc backgroundtính, bạn có thể sử dụng:
background:url(my-bg.png) no-repeat top center / 50px 50px;