csshtmlmasking
Divs with transparent text in CSS?
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
Solution
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?