HTML/CSS: Cách tạo hiệu ứng họa tiết? 4 hình ảnh? CSS3 Gradient?

Question

Tôi đang tìm một giải pháp tốt về cách tạo một vignette effect cho một trang web. Các góc phải đậm hơn màu nền của trang giống như một hình tròn xuyên tâm.

Cho đến nay tôi đã cố gắng tiếp cận khác nhau:

• 4 DIV thiết lập để position: absolute, trên/dưới: 0px, trái/phải:. 0px với một hình ảnh trong mỗi trong số họ (hình ảnh chặn các liên kết ý tưởng Xấu nói chung?)
• Tương tự như trên nhưng với chiều cao cố định/chiều rộng cho div và hình nền thay vì hình ảnh (vẫn chặn liên kết ?!)
• CSS3 nhiều hình nền. Hai trên cơ thể cho trên cùng bên trái/phải và một div phụ ở phía dưới với chiều cao: 300; margin-top: -300px luôn luôn được hiển thị ở phía dưới (hỗ trợ trình duyệt kém)
• CSS3 radial gradient on body (ngay sau đó . khi bạn di chuyển bạn mất nền An div thêm có thể khắc phục điều này cũng xấu hỗ trợ trình duyệt một lần nữa)

về hỗ trợ trình duyệt:. giải pháp phải làm việc trong phiên bản mới nhất của firefox, chrome, IE và nếu có thể opera và safari (được sắp xếp theo tầm quan trọng). Đó là mức tối thiểu tuyệt đối. Nhưng nó cũng thực sự hoạt động trên các trình duyệt cũ. Firefox 3.6 và IE 8 hoặc thậm chí 7 nếu có thể. Tôi không biết nhiều về lịch sử phiên bản chromes, nhưng có vẻ như người dùng Chrome gần như tất cả đều được cập nhật, vì vậy không có vấn đề gì lớn khi bỏ hỗ trợ cho chrome 15 trở xuống ?! Thậm chí có bất kỳ thay đổi quan trọng nào có thể làm cho một cái gì đó hoạt động trong chrome 17, nhưng không phải là ví dụ 15?

Độ nghiêng bố cục CSS3 theo ý kiến ​​của tôi là giải pháp tìm kiếm tốt nhất, nhưng tôi e rằng rất nhiều người dùng sẽ không hỗ trợ vì trình duyệt cũ của họ. Và với giải pháp 4 DIV, tôi gặp vấn đề với các liên kết không thể nhấp được, vì hình ảnh chặn nó. Tôi đã thử rối tung với chỉ số z, nhưng điều đó không hiệu quả. Tôi đã đưa chỉ số z của DIV: 1 và #container (nơi tất cả nội dung được đặt) chỉ mục z là 10. Không nên hoạt động? Chỉ số z-index có ảnh hưởng đến các liên kết không?

Vì vậy, các bạn nghĩ gì, sẽ là một giải pháp tốt? Tôi rõ ràng cần một số trợ giúp ở đây. Cảm ơn!

Answer 1

Tôi đã sử dụng kỹ thuật này được giải thích trong this blog trước đó và nó hoạt động thực sự tốt. Tuy nhiên, không chắc chắn về hỗ trợ cho các trình duyệt cũ.

Answer 2

tùy thuộc vào những gì bạn muốn, một cái gì đó như thế này có thể hoạt động;

<style> 

height: 100%; 
width: 100%; 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 

background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ 

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ 

background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ 

background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */ 

background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */ 

background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */ 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 


} 
</style> 

Hoạt động trên trình duyệt của tôi, sẽ hoạt động trên tất cả các trình duyệt. Nó chắc chắn, chắc chắn, nhưng cho phép bạn thiết lập điều này thành HTML, sau đó bạn có thể có cơ thể, ví dụ, với màu sắc hoặc hình ảnh mà bạn muốn.

Xem tính năng hoạt động tại đây. http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

Answer 3

Bạn có thể sử dụng một bên trong hộp bóng

box-shadow: inset 0 0 100px #000; 

demo: http://jsfiddle.net/ACPUP/

Nhưng nó không hoạt động trong IE7/8.Các phiên bản cũ hơn của Firefox, Chrome, Safari hoặc Opera có thể cần tiền tố của chúng: -webkit-box-shadow, moz-box-shadow hoặc -o-box-shadow.

Bạn cũng có thể xếp các bóng này để có hiệu ứng ấn tượng hơn, nhưng tôi không biết liệu các phiên bản trình duyệt cũ có hỗ trợ điều đó không.

box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000; 

Answer 4

Sử dụng CSS!

biến thể nhẹ về câu trả lời của Willem, theo khuyến cáo của JohnK người mũ nghiêng Chris Coyier:

box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4); 

JSFiddle: http://jsfiddle.net/charlesgoodwin/wKQ2y/

Nó hoạt động rất tốt!