I have set background color and background image for a div. How can I add the opacity to background image so that the background color become visible too?
Here's my code:
CSS:
.box{
background-color: green;
background-image: url('http://farm8.staticflickr.com/7308/12305815623_3d1614042a_n.jpg');
background-repeat: no-repeat;
font-size: 40px;
width: 320px;
height: 200px;
}
HTML:
<div class="box">
<div class="wrap">Some text</div>
</div>
Demo:
http://jsfiddle.net/Yv6T3/
I would suggest a partially transparent PNG is the best solution. It doesn't require any hacks, works on all platforms and degrades nicely even on IE6
There's a several CSS properties for adding opacity:
opacity: 0.2; /* Standard property, for all modern browsers */
filter: alpha(opacity=20); /* For old IE */
Look at the updated fiddle: http://jsfiddle.net/Yv6T3/1/
have been asked already and the answer is pretty nice: How do I give text or an image a transparent background using CSS?
just use
background-color:rgba(255,0,0,0.5);
where 0.5 is your transparency.
Of course, doesn't work everywhere, but for sure does in all modern browsers.
Related
I want an image that has a hyperlink to turn grayscale after the link is visited. Is this possible with HTML/CSS?
I tried first with the img tag, but it seems CSS can't control src or something like that. I'm now tinkering with div classes and the background-image property, but I can't seem to use :visited properly with it, and I'm not sure why. Actually, I have no idea what I'm doing. If anyone could provide a cool example of a code that'd be great!
<a class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)" href="https://google.com/"></a>
.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}
I've also tried:
<div class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)"></div>
.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}
Browsers limits the styles that can be set for a:visited links, due to security issues.
Allowed styles are:
color
background-color
border-color (and border-color for separate
sides)
outline color
column-rule-color
the color parts of fill and
stroke
from https://www.w3schools.com/cssref/sel_visited.asp
Try something like this maybe
$('#link').click(function(){
$("#image").addClass("coolthing-visited");
});
.coolthing {
height: 100px;
width: 200px;
background-size: contain;
}
.coolthing-visited {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link" class="coolthing" href="https://www.google.com" target="_blank">
<img id="image" src="https://www.w3schools.com/css/img_5terre.jpg">
</a>
Is there a way to disable background smoothing in Safari?
I'm trying to make, for example, the tiled background like this:
div#dashed
{
width: 10rem;
height: 7rem;
border: 1px solid #000;
background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">
So, the background is like that:
And I expect the background to look like that (zoomed):
But in Safari it looks like that:
Zoomed:
So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?
As an alternative to using an image, you can achieve the same effect with pure CSS.
.gradient {
width: 200px;
height: 200px;
background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>
You might want to fiddle around to reach the desired outcome.
A bit more info, and tips can be found on https://css-tricks.com/stripes-css/
I think this is because your background was repeat.
You can try it
background-size:cover;
background-repeat: no-repeat;
Setting size for your background-image.
I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4
Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.
If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;
Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(
Here's an example of the image I'm using to give a div on my website a radial gradient 'white glow' effect.
Currently that image is set as the div background - it's about 338KB big and that's unacceptable in web terms. It's incredibly large!
Assuming my div has something like:
.my-div {
background-color: darkblue;
}
Can I apply a radial background to overlay this white color on top of that to achieve a similar effect?
I do not intend to support IE9 and lower, so anything that works on modern browsers and modern mobile browsers is A-OK for my use cases.
Try colorzilla. Here is an example of radial gradient made with CSS3
http://jsfiddle.net/JRUnr/73/
You can create CSS gradients in a simple manner as shown below, if you are designing only for modern browsers.
.block {
width: 400px;
height: 300px;
}
.gradient {
background: rgb(56,68,75);
background: radial-gradient(circle, rgba(56,68,75,1) 0%, rgba(35,43,48,1) 100%);
}
<div class="gradient block"></div>
I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.
Is this possible to achieve this without using transparent PNG background image ?
If you just want the color of the background to be transparent and not the child content, use
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
See this page for more details - it's a css3 spec so won't show up in every browser:
http://www.css3.info/introduction-opacity-rgba/
Yes.
Set
background-color: transparent;
and do not use opacity, as that is what makes semi-transparent the whole div..
updated your example at http://jsfiddle.net/eU7By/1/
UPDATE after comments
you can use rgba for the background-color as #DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
The most cross-browser solution is to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.
Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.
Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
see the jsFiddle example http://jsfiddle.net/DUjzX/1/
The whole code looks like:
The HTML:
<div class="my-cool-wrapper">
<div class="text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
<div class="transparent-background">
</div>
</div>
The CSS:
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
read more:
Set opacity of background image without affecting child elements
Screenshots proofs
ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.
I had to use a 30x30 transparent gif as a background.
background:url('absolute path here');
A very simple CSS method to have a clear transparent background in html is this code.
background: rgba(0, 0, 0, 0.6)!important;