Bạn có thể đạt được hiệu ứng "loại trực tiếp" bằng cách sử dụng CSS như thế nào?

Question

CẬP NHẬT - Chắc chắn tôi đã tìm ra điều này. Mã này hơi dài, nhưng tôi đã ném một trang lên đây để bạn có thể xem nguồn: http://www.sorryhumans.com/knockout-header

Khái niệm này dựa trên: http://algemeenbekend.nl/misc/challenge_gerben_v2.html và sau đó điều chỉnh theo nhu cầu của tôi.

Tiêu đề đáp ứng và bị loại bỏ. (Vui lòng bỏ qua việc triển khai hình ảnh bg đáp ứng xấu 1 phút!). Việc triển khai này cũng không sử dụng bất kỳ CSS3 nào, vì vậy tôi sẽ tưởng tượng rằng sẽ không có nhiều vấn đề về khả năng tương thích.

Vấn đề duy nhất tôi thấy là khi chiều rộng của trình duyệt là một số lẻ (ví dụ: 1393px) trong Chrome, có khoảng cách 1px giữa cột chất lỏng bên tay và cột chính giữa. Tôi không thấy vấn đề này trong phiên bản mới nhất của Firefox, Internet Explorer hoặc khi chiều rộng là số chẵn (ví dụ: 1394px trong Chrome). Bất kỳ ý tưởng?

Câu hỏi gốc: Tôi đang cố gắng mã tiêu đề mà tôi đã thiết kế nhưng không thể tìm ra cách để có được hiệu ứng tôi đang tìm kiếm. Hãy nhìn vào hình ảnh đính kèm (Không, đây không phải là thực sự những gì tôi đang làm việc trên :) chỉ là ví dụ!)

Bức ảnh là một bức ảnh đầy đủ chiều rộng đáp ứng. Tiêu đề có chiều rộng đầy đủ, nhưng nội dung của nó nằm trên lưới đáp ứng không vượt quá một số kích thước tùy ý (được hiển thị bằng các đường màu đen), nhưng có thể giảm tỷ lệ. Tôi có thể thực hiện tất cả những điều này, nhưng những gì tôi gặp khó khăn trong việc tìm ra là làm thế nào để làm cho thanh tiêu đề được trong suốt, nơi logo sẽ được. Nói cách khác, thay vì để logo ở trên đầu thanh, tôi muốn "đánh bật nó" của tiêu đề.

Điều này có thể thực hiện được không?

Answer 1

Không có hỗ trợ vốn có cho các hiệu ứng loại trực tiếp, vì vậy bạn sẽ phải có văn bản như một phần của hình ảnh.

Cách dễ nhất để làm điều này là để nền sau hiệu ứng loại trực tiếp là phần chắc chắn của hình ảnh. Bạn có thể tạo .png với nền và độ trong suốt vững chắc nơi bạn muốn có hiệu ứng loại trực tiếp và sử dụng css opacity để làm cho toàn bộ tiêu đề có phần trong suốt. Bạn sẽ cần phải thiết lập tiêu đề với nhiều phần để các phần không phải là hình ảnh (tức là bên ngoài các thanh màu đen) có màu nền, trong khi các phần có hình ảnh thì không.

Rất khoảng:

<div id="outerHeaderWithOpacity"> 
    <div class="hasBackground">Left side, will stretch</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">As many sets as you need</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">Right side, will stretch</div> 
</div> 

Answer 2

http://jsfiddle.net/GZ8Xv/

không phải là giải pháp đẹp nhưng sử dụng css3 flexbox nghiệm: (với display: table dự phòng)

<div class="wrapper"> 
    <div class="left"><br /></div> 
    <div class="middle"><br /></div> 
    <div class="right"><br /></div> 
</div> 

.left, .right 
{ 
    height:100%; 
    border: 1px solid black; 
    display:table-cell; 
    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-flex: 1; 
} 

.middle 
{ 
    display: table-cell; 
    display: -webkit-flexbox; 
    width: 500px; 
    height:100%; 
    border: 1px solid blue 
} 

.wrapper 
{ 
    display: table; 

    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -ms-box-orient: horizontal; 
    -o-box-orient: horizontal; 
    width: 100%; 
    height: 100px; 
} 

XIN LƯU Ý: thông số kỹ thuật flexbox w3c vẫn ở dạng thông lượng và có thể thay đổi lần thứ ba. Tôi chỉ thử nghiệm điều này trong IE9 (cả hai chế độ IE9 và IE8.Không hoạt động ở chế độ IE7) và Chrome 20 và 22

Một vài thay đổi nhỏ: http://jsfiddle.net/GZ8Xv/2/ và bạn có bố cục 5 div không có javascript.