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.
- ASCII 3D Text looks glitchy when used for a HTML Website
- table with sticky header and horizontal scroll
- CSS: 100% width or height while keeping aspect ratio?
- move words into a specific area
- How to set min width on content but still never exceed parent container width
- jQuery button click not showing/hiding content
- How do I auto scroll in Angular?
- How to remove lines between cells in Material UI Table
- Adding doctype for html5 (or any doctype) breaks my site
- Setting the background of an input element as a combination of three colors
- CSS :after or :before reading dynamic values from HTML. No JS. Pure CSS
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How to Apply Background Color for Children in a Repeating Pattern (Blue, Purple, Red)
- Text cropping when using overflow: hidden
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Refused to apply inline style because it violates Content Security Policy (using hash for JQuery inline style)
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Convert RGB color to English color name, like 'green' with Python
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Why does this strange space start appearing at the bottom of the page only on mobile?