How to change background-image opacity in CSS without affecting the text

Thank you so much for your quick solution… coder-coder.com

copy-paste

When building a website, you may often want to put a background image on an HTML <div> that also contains text or other content.

And to make the text stand out, you want to change the opacity of that background image in CSS so that it’s semi-transparent. But you’ve tried, and you can’t change the opacity of the background image without also affecting the text or other child elements!

What can you do? Not to worry– this article will give you some practical solutions to controlling your background image opacity.

So, first, the bad news…

Illustrator Photoshop

Take one:
^{(and be annoyed by how the outer white ring is just an error in the file)}

Add another:

And create!

Yes, you can contact My Brain if this is the kind of work you need to have done.
Have a nice day! 🙂

PS.
And a small note on WordPress; how to remove the default link to the media file when inserting an image? Manually change the image_default_link_type setting (in your database table wp_options) from value “file” to “none”.

Break-inside: avoid

Remember… (see source)
When using the following in CSS:

   break-inside: avoid;

also add to the same item:

   overflow: hidden;

Otherwise Firefox will give you a headache.
Have a nice day 🙂

CSS Stylesheet selectors

Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.

iOS fixed layers and scrolling

If it does not scroll as expected on iOS, try:

height: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;

That’s all! Continue reading iOS fixed layers and scrolling

more css

bron: https://css-tricks.com/examples/ShapesOfCSS/

Please not some of these do not work because of the default stylesheet ‘box-sizing’:
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

TheShapes of CSS

All of the below use only a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser.

Square

Rectangle

Circle

Continue reading more css