Có cách nào để tôi có thể sử dụng CSS3 để mờ dần trong và ngoài nền trắng trơn của <div> không? nội dung sẽ vẫn hiển thị nên chỉ nền sẽ mờ dần.Làm cho nền mờ dần/trong
Bất kỳ ý tưởng nào sử dụng chuyển đổi/chuyển đổi css3?
cảm ơn sự giúp đỡ của bạn.
Chắc chắn, bạn có thể sử dụng transition property trực tiếp trên background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Dưới đây là an example của nền đỏ phai ra trên :hover.
Bạn có thể tìm thấy điều này hữu ích cho ví dụ về hình ảnh và màu nền mờ: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
Tuy nhiên sử dụng CSS 3 để thực hiện quá trình chuyển đổi sẽ hạn chế ảnh hưởng đến các trình duyệt không hỗ trợ nó.
cách tiếp cận rất hay, +1 để được hướng dẫn tốt – doniyor
Bạn có thể có hai divs trong một div vùng chứa. Div đầu tiên chứa nền trắng, phần thứ hai lấy nội dung.
Sau đó, sử dụng chuyển đổi CSS3 để tạo hoạt ảnh cho độ mờ đục của div đầu tiên thành 0.
Cảm ơn bạn đã đề xuất. Cuối cùng, tôi đặt màu đầu tiên là nội tuyến trên div và màu thứ hai (ví dụ: màu trắng) bên ngoài làm màu nền: trắng! cũng như thuộc tính chuyển đổi. – Frank
Bạn không biết bạn thực sự có thể tạo hiệu ứng màu nền hay không. Tôi nghĩ rằng đó là tốt hơn rất nhiều so với giải pháp của tôi :) – Husky
@Husky Transitions là khá tuyệt vời nhưng tôi mong muốn khi chúng ta có thể thả tất cả các tiền tố cụ thể của trình duyệt. – Pat
bạn có thể sử dụng LESS/SASS và sử dụng mixin ở đó. Ít nhất làm cho nó dễ chịu nếu bạn đang sử dụng nhiều thuộc tính CSS3. – Husky