sách gpt4 ai đã đi

Giới hạn lặp lại nền CSS (Nhiều hình nền)

In lại Tác giả: Technical Little Cat Thời gian cập nhật: 2023-10-29 11:31:03 27 4
mua khóa gpt4 Nike

Tôi đang cố gắng tạo hiệu ứng nền đẹp mắt (có độ trong suốt alpha và góc bo tròn) cho menu thả xuống chỉ bằng một mục CSS.

Tôi có nắp trên cùng (180 x 4 pixel), nắp dưới cùng (180 x 20 pixel) và nắp giữa lặp lại (180 x 2 pixel).

Sau đây là mã CSS có liên quan hiện tại của tôi:

ảnh nền: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position: trên cùng bên trái, dưới cùng bên trái, 0px 10px;
background-repeat:không-lặp-lại, không-lặp-lại, lặp-lại-có;

Vấn đề là phần giữa cần mở rộng/lát gạch được lặp lại hoàn toàn bên dưới nắp trên và nắp dưới - do đó, các góc tròn của tôi giờ thành hình vuông vì chúng có phần giữa lặp lại bên dưới.

Có cách nào để ngăn nhiều hình nền chồng lên nhau không? ?

Cảm ơn trước nhé!

1 Câu trả lời

Nguồn gốc nền và/hoặc clip nềnnên làm được điều đó. Chỉ cần đặt đường viền trên cùng và dưới cùng bằng với chiều cao của đồ họa nắp, sau đó đặt drop_middle thành background-clip:hộp đệm


CHỈNH SỬA: Đây là giải pháp hoàn chỉnh, nhưng dành cho hướng ngang: http://jsfiddle.net/nGSba/

#hộp
{
hiển thị: khối nội tuyến;
lề: 1em;
đệm: 9px;
border-left:9px rắn trong suốt;
border-right:9px rắn trong suốt;
hình nền: url(http://s11.postimage.org/ufpdknvjz/left.png),
url(http://s11.postimage.org/6ng294tj3/right.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
background-repeat: không lặp lại, không lặp lại, lặp lại-x;
background-position: góc trên bên trái, góc trên bên phải, góc trên bên trái;
nguồn gốc nền: border-box,border-box,padding-box;
background-clip: border-box,border-box,padding-box;
}

Điều làm tôi bận tâm là màu viền TRÊN trong suốt. Nền sẽ luôn nằm trong đường viềnDưới, vì vậy nếu đường viền của bạn là đường liền thì nền vẫn sẽ không hiển thị.

Liên quan đến việc CSS giới hạn lặp lại hình nền (nhiều hình nền), chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/8055582/

27 4 0
Công nghệ mèo con
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com