Just use one if you don’t want the background to change on hover. It’s arguably an improvement on Example 2 as the text and background both change when the entire area of the image is hovered.įor browsers that don’t support RGBA backgrounds, two transparent pngs are applied to the span: one for the initial state and one for when the anchor is hovered (you’ll need to source these yourself). Set the overlay as absolute, which will be relative to the upper-left edge of the first image. Set the background image as relative so as the div knows how big it must be. You can change the value of the color as per your requirements. After that, specify some value to rgba () color for color overlay and url () for the background image as given below. Just a single anchor containing an image and a span. Add a relative div placed in the flow of the page. To make the background image color overlay effect, you have to use the CSS background: linear-gradient (0deg, rgba (), rgba ()), url (). If you’re interested, head over to debuggingcss.Here’s a way to achieve the effect of Example 2 but with much simpler markup. I’m excited to let you know that I wrote an ebook about Debugging CSS. Thanks to Gijs Veyfeyken for letting me know about Firefox can do a color contrast test on gradients. If not, you need to tweak and enhance it.įor the example above, I picked the solid color under the title, and the contrast ratio is 4.74, which is considered good. If the text is readable, then the gradient will work with whatever image you use. TestingĪ solution can’t be considered good until it’s tested, right? One way that I use to test a gradient overlay is to add a white background below it. Generally speaking, if you make sure that the gradient overlay fills the text correctly, and it has a decent color contrast, you’re good to go. An interesting challenge is to handle the accessibility for a gradient. This is a great tool that helps us in picking the right overlay opacity based on the image. It could be a cross-browser issue or something since I didn’t heavily test the radial gradient solution. That means the gradient size is equal to the element’s height. The content element is positioned absolutely, and it has a gradient as a background image.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |