Tôi đang sử dụng bootstrap 3 làm khung lưới và CSS để tạo vùng bán trong suốt với cạnh nghiêng/vát, nhưng tôi gặp vấn đề với các thành phần của mình do độ mờ theo lớp.

Kỳ vọng là phần giữa nghiêng nhưng cạnh phải vẫn vuông.

Có cách nào tốt hơn để đạt được điều này? Xem jsfiddle để biết ví dụ hoạt động.

    

        

            
        

        

            
Văn bản tiêu đề

            
Nhập văn bản dài

        

    



.row.marketing-text .right {
    phần đệm trên cùng: 50px;
    phần đệm dưới cùng: 50px;
    phần đệm bên trái: 50px;
    phần đệm bên phải: 50px;
    màu nền: rgba(255, 139, 0, 0,5);
}
.row.marketing-text .right::trước {
    nội dung: " ";
    nguồn gốc biến đổi: top;
    -ms-transform: nghiêng(-20deg, 0deg);
    -webkit-transform: nghiêng(-20deg, 0deg);
    biến đổi: nghiêng(-20deg, 0deg);
    vị trí: tuyệt đối;
    hiển thị: khối;
    chiều rộng: 100%;
    chiều cao: 100%;
    trên cùng: 0;
    trái: 0;
    màu nền: rgba(255, 139, 0, 0,5);
}

https://jsfiddle.net/aq9Laaew/255707/

câu trả lời hay nhất

Để trích dẫn ví dụ của bạn, có màu nền Các lớp chồng chéo với giá trị opacity/rgba chắc chắn sẽ không đạt được kết quả như mong muốn.

Một cách tốt hơn là sử dụng :trước Và :sau đó Phần tử giả

Về html - cách sử dụng độ mờ trên nội dung và nội dung :: trước mà không bị chồng chéo, 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/52976550/