Một tập hợp các phương thức có thể để đặt hình ảnh từ CSS
:afterPhần tử giả của CSS2 hoặc cú pháp mới hơn::after từ CSS3 cùng với thuộc content:tính:
Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, Đặc tả CSS2 cấp 2 ngày 12 tháng 5 năm 1998
Khuyến nghị mới nhất của W3C: Bộ chọn Khuyến nghị W3C cấp 3 29 tháng 9 năm 2011
Phương pháp này nối thêm nội dung ngay sau nội dung cây tài liệu.
Lưu ý: một số trình duyệt thử nghiệm hiển thị thuộc contenttính trực tiếp trên một số bộ chọn thành phần bất chấp đề xuất W3C mới nhất xác định:
Áp dụng cho: :beforevà :aftercác yếu tố giả
Cú pháp CSS2 (tương thích về phía trước):
.myClass:after {
content: url("somepicture.jpg");
}
Bộ chọn CSS3:
.myClass::after {
content: url("somepicture.jpg");
}
Kết xuất mặc định: Kích thước gốc (không phụ thuộc vào khai báo kích thước rõ ràng)
Thông số kỹ thuật này không xác định đầy đủ sự tương tác của: trước và: sau với các yếu tố được thay thế (chẳng hạn như IMG trong HTML). Điều này sẽ được xác định chi tiết hơn trong một đặc điểm kỹ thuật trong tương lai.
nhưng ngay cả tại thời điểm viết bài này, hành vi với <IMG>thẻ vẫn chưa được xác định và mặc dù nó có thể được sử dụng theo cách bị hack và không tuân thủ tiêu chuẩn , không nên sử dụng với<img> !
Phương pháp ứng cử viên tuyệt vời, xem kết luận ...
CSS1 's
background-image:Thuộc tính :
Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, cấp 1 ngày 17 tháng 12 năm 1996
Thuộc tính này đặt hình nền của một phần tử. Khi đặt hình nền, người ta cũng nên đặt màu nền sẽ được sử dụng khi hình ảnh không có sẵn. Khi hình ảnh có sẵn, nó được phủ lên trên cùng của màu nền.
Thuộc tính này đã có từ đầu CSS và tuy nhiên nó xứng đáng được đề cập đến.
Kết xuất mặc định: Kích thước gốc (không thể thu nhỏ, chỉ định vị)
Tuy nhiên ,
background-size:Thuộc tính của CSS3 đã cải thiện nó bằng cách cho phép nhiều tùy chọn chia tỷ lệ:
Trạng thái W3C mới nhất: Mô-đun CSS và Biên giới đề xuất của ứng viên Cấp 3 ngày 9 tháng 9 năm 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
Nhưng ngay cả với tài sản này, nó phụ thuộc vào kích thước container.
Vẫn là một phương pháp ứng cử viên tốt, xem kết luận ...
list-style:Thuộc tính của CSS2 cùng vớidisplay: list-item :
Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, Đặc tả CSS2 cấp 2 ngày 12 tháng 5 năm 1998
list-style-image: thuộc tính đặt hình ảnh sẽ được sử dụng làm điểm đánh dấu mục danh sách (dấu đầu dòng)
Các thuộc tính danh sách mô tả định dạng trực quan cơ bản của danh sách: chúng cho phép các biểu định kiểu chỉ định loại điểm đánh dấu ( hình ảnh , glyph hoặc số)
display: list-item- Giá trị này làm cho một phần tử (ví dụ: <li>trong HTML) tạo hộp khối chính và hộp đánh dấu.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Viết tắt CSS: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Kết xuất mặc định: Kích thước gốc (không phụ thuộc vào khai báo kích thước rõ ràng)
Những hạn chế:
Kế thừa sẽ chuyển các giá trị 'kiểu danh sách' từ các phần tử OL và UL sang các phần tử LI. Đây là cách được đề xuất để xác định thông tin kiểu danh sách.
Họ không cho phép tác giả chỉ định phong cách riêng biệt (màu sắc, phông chữ, căn chỉnh , v.v.) cho điểm đánh dấu danh sách hoặc điều chỉnh vị trí của nó
Phương pháp này cũng không phù hợp với <img>thẻ vì chuyển đổi không thể được thực hiện giữa các loại phần tử và đây là bản hack không tuân thủ giới hạn, không hoạt động trên Chrome.
Phương pháp ứng viên tốt, xem kết luận ...
Đề xuất thuộcborder-image: tính của CSS3 :
Trạng thái W3C mới nhất: Mô-đun CSS và Biên giới đề xuất của ứng viên Cấp 3 ngày 9 tháng 9 năm 2014
Một phương thức kiểu nền dựa vào việc chỉ định kích thước theo cách khá đặc biệt (không được xác định cho trường hợp sử dụng này) và các thuộc tính đường viền dự phòng cho đến nay (ví dụ border: solid:):
Lưu ý rằng, mặc dù chúng không bao giờ gây ra cơ chế cuộn, hình ảnh bên ngoài vẫn có thể được cắt bởi tổ tiên hoặc bởi chế độ xem.
Ví dụ này minh họa hình ảnh chỉ được sáng tác như một trang trí góc dưới bên phải :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Áp dụng cho: Tất cả các thành phần, ngoại trừ các thành phần bảng bên trong khi border-collapse: collapse
Tuy nhiên nó không thể thay đổi một <img>từ khóa 's src(nhưng đây là một hack ), thay vào đó chúng ta có thể trang trí nó:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
Phương pháp ứng cử viên tốt để được xem xét sau khi tuyên truyền tiêu chuẩn.
Bản thảo làm việcelement() ký hiệu của CSS3 cũng đáng được đề cập:
Lưu ý: element()Hàm chỉ tái tạo sự xuất hiện của phần tử được tham chiếu, không phải nội dung thực tế và cấu trúc của nó.
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
Chúng tôi sẽ sử dụng các nội dung trả lại của một trong hai hình ảnh ẩn để thay đổi hình ảnh nền trong #img1dựa trên Selector ID qua CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Lưu ý: Đây là thử nghiệm và chỉ hoạt động với -moztiền tố trong Firefox và chỉ hơn backgroundhoặc background-imagethuộc tính, cũng cần các kích thước được chỉ định.
Kết luận
- Bất kỳ nội dung ngữ nghĩa hoặc thông tin cấu trúc đều có trong HTML.
- Kiểu dáng và thông tin trình bày đi trong CSS.
- Đối với mục đích SEO, đừng ẩn hình ảnh có ý nghĩa trong CSS.
- Đồ họa nền thường bị vô hiệu hóa khi in.
- Thẻ tùy chỉnh có thể được sử dụng và tạo kiểu từ CSS, nhưng các phiên bản nguyên thủy của Internet Explorer không hiểu] ( IE không tạo kiểu thẻ HTML5 (với shiv) ) mà không có hướng dẫn Javascript hoặc CSS .
- Theo thiết kế của SPA (Ứng dụng một trang), thường kết hợp hình ảnh trong nền
Phải nói rằng, hãy khám phá các thẻ HTML phù hợp để hiển thị hình ảnh:
Các <li> tử [HTML4.01 +]
Usecase hoàn hảo của list-style-imagevớidisplay: list-item phương pháp .
Phần <li>tử, có thể trống, cho phép lưu lượng nội dung và thậm chí nó được phép bỏ qua </li>thẻ kết thúc.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
Hạn chế: khó tạo kiểu ( width:hoặc float:có thể giúp)
Phần <figure>tử [HTML5 +]
Phần tử hình biểu thị một số nội dung luồng, tùy ý có chú thích, độc lập (giống như một câu hoàn chỉnh) và thường được tham chiếu dưới dạng một đơn vị từ luồng chính của tài liệu.
Phần tử hợp lệ không có nội dung, nhưng được khuyến nghị để chứa a <figcaption>.
Do đó, phần tử có thể được sử dụng để chú thích minh họa, sơ đồ, hình ảnh , danh sách mã, v.v.
Kết xuất mặc định: phần tử được căn phải, với cả phần đệm bên trái và bên phải!
Phần <object>tử [HTML4 +]
Để bao gồm hình ảnh, tác giả có thể sử dụng yếu tố ĐỐI TƯỢNG hoặc yếu tố IMG.
Các datathuộc tính được yêu cầu và có thể có một giá trị kiểu MIME như một giá trị!
<object data="data:x-image/x,"></object>
Lưu ý: một mẹo để sử dụng <object>thẻ từ CSS sẽ là đặt MimeType hợp lệ tùy chỉnhx-image/x theo sau là không có dữ liệu (giá trị không có dữ liệu sau dấu phẩy được yêu cầu, )
Kết xuất mặc định: 300 x 150px, nhưng kích thước có thể được chỉ định bằng HTML hoặc CSS.
Cần một trình duyệt có khả năng SVG và có một <image>yếu tố cho hình ảnh raster
Phần <canvas>tử [HTML5 +].
Các widthgiá trị mặc định thuộc tính để 300 , và các heightgiá trị mặc định thuộc tính để 150 .
Phần <input>tử vớitype="image"
Hạn chế:
... phần tử được dự kiến sẽ xuất hiện giống như nút để cho biết phần tử đó là nút.
Chrome nào theo sau và hiển thị hình vuông trống 4 x 4 pixel khi không có văn bản
Giải pháp từng phần, thiết lập value=" ":
<input type="image" id="img1" value=" ">
Đồng thời xem <picture>phần tử sắp tới trong HTML5.1 , hiện đang là bản nháp đang hoạt động .