I have a number of headings and in the background of each I want to show the same gradient color, but a different (non-repeating) background image. I want to avoid duplicating any CSS rules for the background gradient color or background image position, because they will be the same for each heading. In other words, the only thing I should need to specify for an individual heading is the path to the background image file.
Here's what I have at the moment:
<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>
.banner {
/* For old browsers that don't support gradients */
background-color: #9FCC1D;
/* browser-specific prefixes omitted */
background-image: linear-gradient(#75A319, #9FCC1D);
padding: 7px 7px 7px 15px;
}
/* Specifies position of background image */
.bgImage {
background-position: 5px 50%, 0 0;
background-repeat: no-repeat;
padding-left: 30px;
}
.img1 {
background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}
.img2 {
background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}
.img3 {
background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}
There are a couple of problems with this
I have to repeat the linear-gradient style in each .imgX rule
It doesn't render correctly in Chrome, which doesn't seem to support a comma-separated list of background-image and background-repeat properties. This is what gets displayed in Chrome
How can I fix the problem with the way the background is rendered in Chrome while minimising duplication of CSS rules?
Use the :before pseudo-class for your background icons.
.img1:before {
content: '';
float: left;
position: relative;
background: transparent url('img1.png') left top no-repeat;
width: 16px; /* change to actual width of img */
height: 16px; /* change to actual height of img */
}
Or, since you're trying to relieve the amount of CSS, you can specify a class for the gradient and append that in your HTML.
Don, you have two classes which this background gradient can be applied to, bgImage and banner. Simply apply your gradient on to one of those classes and go from there. Also append repeat-x right after your image url to ensure it will repeat across.
Related
This question already has answers here:
Change color of text responding to background color
(2 answers)
Closed 3 years ago.
I have an image and text as like below.
.html
<div [ngClass]="cssDivClass" (click)="goToNextPage(data)">
<img [src]="data?.image" class="image" tappable>
<div class="caption" [ngClass]="ionTextUppercase">{{data?.name }}</div>
</div>
.scss
.caption {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
}
My question here is How can I handle this text color (i.e. white) with the White background image? What kind of CSS trick should I use here? I need white color text here since most of the other images have dark colors. So how can I handle this thing in a generic way?
You might try a shadow on the white text, this way it will show up on dark and light photographs.
text-shadow: #fc0 1px 0 10px;
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
Another trick is to use a semi transparent div below the text, so that no matter what the background is, the text will be visible. It would look like this:
https://divibooster-6d4b.kxcdn.com/wp-content/uploads/2014/10/divi-theme-semi-transparent-background.png
Still another possibility would be to use Javascript. If your photo is a 'light' photo, change your text's css class to 'color: black'. If it is a 'dark' photo, change your text's css class to 'color: white'.
Maybe text-shadow may help you to have a good contrast also in light background.
You can also consider a prominent color extraction plugin to set an alternative text color if the background is light:
https://ourcodeworld.com/articles/read/403/top-5-best-image-color-extraction-javascript-and-jquery-plugins
You can consider also to use:
mix-blend-mode: difference;
and use text-shadow only for browser that not support this property
https://caniuse.com/#search=mix-blend-mode
body{
background:#fff;
font-size:30px;
}
.container{
transform: translateZ(0);
will-change: opacity;
background: url("https://placeimg.com/640/480/any/grayscale")
no-repeat left / cover;
}
.shadow {
color:#fff;
text-shadow:1px 1px 2px #000;
}
.blend {
mix-blend-mode: difference;
color:#fff;
}
<div class="container">
<div class="shadow">text-shadow</div>
<div class="blend">difference</div>
</div>
In HTML when do I use color, and what is the difference between background-color and also the background tag?
What are the differences?
color is referring to the text color in that element.
background-color refers to the background color
background is shorthand to combine many background tags into one line.
background: #ffffff url("img_tree.png") no-repeat right top;
Combines color, image and background image properties in the one line instead of typing our each style individually.
w3schools
I will give you a example using this html element:
<span class="value"> This is my text </span>
.value { color: red, background-color: black}
The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:
background: #00ff00 url("smiley.gif") no-repeat fixed center;
This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.
Quick answer
Color = Text Color
Background-color = the color of the background
Background = gives you the posibillity to set color, image , etc...
great tutorials on this are found here
It is true that background gives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.
background: yellow;
background-color: yellow;
.bc {
background: yellow;
background-color: green;
}
.bc2 {
background-color: green;
background: yellow;
}
<div class='bc'>
bc { background:yellow; background-color:green; }
</div>
<div class='bc2'>
bc { background-color:green; background:yellow; }
</div>
One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:
background:url('https://example.com/image.jpg');
or
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%);
If you are trying to change the background from an image to a color you have to use the background property.
color: is used to add color to the Text within the Tag.
color: blue;
background-color: is used to add color in background of the content inside the tag.
background-color : red;
background: is used for adding different type of background property name to the content within the Tag.
background : red url('image.png') fixed repeat cover;
How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?
Question below was asked previously -
Change color of PNG image via CSS?
The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?
To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.
img {
-webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I played around a bit and found a possible solution to only paint the white parts:
img {
display: block;
background: black;
-webkit-filter: brightness(.5);
}
.recolor {
position: relative;
display: inline-block;
-webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.3);
}
<figure class="recolor">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>
How it works:
Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white
Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal
Just give background color to image, For Example below.
Use this image
NOTE: Image is transparent
CSS
img{
background-color: red;
}
HTML
<img src="test.png">
It IS possible to "colorise" a white image using filters but the results are imperfect.
The first step is a sepia filter and then a hue-rotate.
A true "Red" may be harder to achieve but you can play with this further.
img {
max-height: 100vh;
width: auto;
-webkit-filter:
sepia(100%)
saturate(2000%)
hue-rotate(222deg);
}
body {
background: green;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
I'm trying to create an arrow button like the upvote here in stackoverflow (http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5).
The only difference is when I hover the mouse over the arrow, it will change the background image.
I need something like this http://css-tricks.com/snippets/css/css-triangle/, but with background image, instead of RGB color.
What is the best way?
If you know your background color, you can get sneaky. For example, if the background of the page is white...
HTML
<div id="arrow">
CSS
#arrow {
width: 0;
border: 40px solid white;
border-bottom-color: transparent;
background-image: url('...');
background-position: -40px 0;
background-repeat: no-repeat;
background-size: 80px;
}
You'll have to munge with the background position and size properties to get exactly the effect you want.