Im có thể cung cấp vị trí bắt đầu của hình nền. Nhưng nếu tôi cung cấp cho các vị trí cho nền điền rắn của nó không hoạt động. Đây là js fiddle cho điều đó.vị trí nền cho màu nền
Vì vậy, chúng ta có thể thiết lập vị trí bắt đầu và kích thước của một nền điền rắn?
Cảm ơn!
Bạn không thể bù đắp màu nền. Chỉ hình nền mới có vị trí.
Đây là một cách để bù đắp một màu nền vững chắc, sử dụng một gradient tuyến tính với một màu trong suốt cho số x đầu tiên của pixel:
.offset {
background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%);
width: 100%;
height: 500px;
}
Dưới đây là a demo trên JSFiddle.
Tôi đã đi đến bản demo trên JSFiddle và thấy kết quả không có gì là kết quả, ngay cả khi tôi đẩy chạy. Tôi đã mong đợi màu nền div clr chỉ bù đắp một chút, nhưng không có gì cho thấy. Có lỗi trong tập lệnh không? Đối với bất cứ điều gì nó có giá trị, tôi đã cố gắng thêm CSS từ câu trả lời của Ash và thấy hư vô quá. Tôi thậm chí đã thử thêm nó vào bản gốc. –
@SarahWeinberger - Thử lại liên kết JSFiddle, tôi đã thêm tiền tố trình duyệt vào CSS. – StuR
Cảm ơn, mã cập nhật đã hoạt động. Lưu ý cho người khác: Chế độ xem thiết kế nội bộ của Visual Studio 2013 không hiển thị màu/màu. Bạn phải chạy ví dụ trong trình duyệt thực để xem kết quả. Tôi rơi vào cái bẫy này và cố gắng tìm ra sự khác biệt giữa Fiddler và trình duyệt của tôi (VS2013 Design View) và nhận ra rằng VS không phải là một trình duyệt thực sự và có những hạn chế. –
Tôi sẽ có cách tiếp cận tương tự như StuR, nhưng sử dụng vị trí nền thay vì các điểm dốc. Sau đó, bạn có thể đặt vị trí nền như thường lệ.
div {
background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}
Lưu ý, điều này không hoạt động với các giá trị phần trăm như 50% – jsheffers
Lưu ý, IE9 không & opera mini không hỗ trợ linear-gradient – Flion
Điều này xuất hiện nhiều pixel hơn.Chỉ với một gradient tuyến tính, tôi có một số dòng "mờ" trong một số trình duyệt khi phần tử quá lớn. – hesselbom
Vâng, với linear gradient nó hoạt động:
div { background-image: linear-gradient(transparent 10px, grey 10px); }
Xem ra cho sự liên kết không đúng khi linear-gradient điểm được sử dụng. Dưới đây là một cách tiếp cận tốt hơn:
background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;
Nó sử dụng linear-gradientchỉ để tạo màu, sau đó được thay đổi kích cỡ để phản ánh quy mô khu vực có mái che. Cũng background-position thể được sử dụng khi cần thiết
Một cách khác để thực hiện điều này sẽ có thêm một phần tử giả đến các phần tử div như vậy:
div {
::before {
border-top: 10px solid #0066a4;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 12px; left: 0; right: 0; bottom: 0;
z-index: -1;
}
}Xem CodePen này bởi Eric Rasch ví dụ: https://codepen.io/ericrasch/pen/Irlpm
Tôi đang cố gắng để có được hiệu ứng này http://jsfiddle.net/H48ua/, không có div bên trong ".bg" bằng cách chuyển ".bg" sang div ".cover" – rajkamal