Đặt hình nền bên ngoài đường viền chứa div

Question

Tôi đang cố gắng đặt hình nền ở bên ngoài div chứa thực tế.

<div class="expandable">Show Details</div> 

.expandable 
{ 
    background: transparent url('./images/expand.gif') no-repeat -20px 0px; 
} 

để hình ảnh "mở rộng" về cơ bản chỉ xuất hiện ở bên trái của div.

Tôi không thể làm việc này, hình ảnh không hiển thị khi hình ảnh được đặt bên ngoài đường viền của vùng chứa. Tôi không chắc chắn nếu có một thủ thuật CSS tôi đang thiếu, hoặc nếu nó là một cái gì đó để làm với bố trí trang của tôi (div "mở rộng" được lồng bên trong một số divs khác).

Có thể thực hiện việc này không? Bất kỳ gợi ý nào?

Edit: đây là một jsFiddle cho thấy vấn đề: link

Answer 1

Bạn sẽ phải đặt hình nền bên trong một yếu tố riêng biệt. Vị trí hình nền không thể đặt hình ảnh bên ngoài phần tử mà chúng được áp dụng.

chỉnh sửa câu hỏi của bạn đã chạy bộ nhớ của tôi và tôi đã đi kiểm tra thông số CSS. Trên thực tế, bạn có thể đặt thuộc tính CSS "nền đính kèm" mà sẽ đặt nền cho khung nhìn thay vì phần tử. Tuy nhiên, đó là lỗi hoặc bị hỏng trong IE, đó là lý do tôi đã bị nó ngồi trên "không sử dụng" kệ trong đầu tôi :-)

chỉnh sửa — Lưu ý rằng câu trả lời này là từ năm 2010, và mới hơn (và, quan trọng hơn, được hỗ trợ rộng rãi) khả năng CSS tồn tại trong năm 2016.

Answer 2

Bạn không thể làm điều này như thế nào bạn muốn chính xác, nhưng có một giải pháp khá đơn giản. Bạn có thể đặt div khác bên trong .expandable như:

<div class="expandable">Show Details<div class="expandable-image"></div></div> 

Sau đó CSS ​​của bạn sẽ giống như thế:

.expandable{ position:relative; } 
.expandable-image{ 
    position:absolute; top:0px; left:-20px; 
    width:<width>px; height:<height>px; 
    background: url('./images/expand.gif') no-repeat; 
} 

Answer 3

Tùy thuộc vào các chi tiết của tình hình của bạn, bạn có thể có thể nhận được ngay với CSS3 của border-image-* rules . Ví dụ, tôi đã sử dụng chúng một cách hiệu quả để đặt "nút tìm kiếm giả" trong hàng bộ lọc của tiện ích CGridView trong yii (nhấp vào bất kỳ nơi nào bên ngoài hộp nhập của bộ lọc sẽ kích hoạt cuộc gọi ajax, nhưng "nút" này cung cấp cho người dùng điều gì đó trực quan). Nó không phải là giá trị nó cho tôi để phân lớp phụ tùng CGridColumn chỉ để hack html trong phương thức renderFilterCell() * - Tôi muốn có một giải pháp CSS tinh khiết.

.myclass .grid-view .items { 
    border-collapse: separate ; 
    } 

    .myclass .grid-view .filters td + td { 
    border-image-source: url("/path/to/my/img_32x32.png"); 
    border-image-slice: 0 0 0 100%; 
    border-image-width: 0 0 0 32; 
    border-image-outset: 0 0 0 40px; 
    border-width: 1px; 
    } 

    .myclass .grid-view .filters input { 
    width: 80%; 
    } 

Có một chút của một thủ thuật liên quan đến các giá trị biên giới-image-width - đó 32 là một số nhân không chiều dài (không đặt px) của đơn vị sử dụng trong biên độ rộng (tức là 1px). Kết quả là các nút giả trong các cột n-1 đầu tiên của GridView. Trong trường hợp của tôi, tôi không cần bất cứ điều gì trong cột cuối cùng bởi vì nó là một CButtonsColumn mà không có một hộp lọc. Dù sao, tôi hy vọng điều này sẽ giúp mọi người tìm kiếm một giải pháp CSS tinh khiết & # x1F600; * Không lâu sau khi viết bài này, tôi phát hiện ra rằng tôi có thể ghép nối mã cho một hình ảnh trong thuộc tính 'bộ lọc' của mảng được sử dụng để xây dựng CGridColumn, vì vậy lý do của tôi hóa ra là tranh luận. Thêm vào đó có vẻ là một vấn đề (trong Firefox, anyway) với biên giới-hình ảnh lặp lại bị buộc phải căng ra ngay cả khi không gian được chỉ định.Tuy nhiên, có thể điều này có thể hữu ích cho ai đó & # x1F615; : - \

Answer 4

Tôi biết đây là một chuỗi cũ nhưng tôi chỉ muốn cập nhật và thêm rằng điều này có thể sử dụng các phần tử giả CSS.

.class:before { 
    content: ""; 
    display: inline-block; 
    width: {width of background img}; 
    height: {height of background img}; 
    background-image: url("/path/to/img.png"); 
    background-repeat: no-repeat; 
    position: relative; 
    left: -5px; //adjust your positioning as necessary 
}