This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 1 year ago.
For example I have this CSS to give a background image to my web site:
body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-image: url(/images/grid.png);
background-repeat: repeat;
}
It is a simple repeating image but I want to make it opaque with an alpha value of .5.
Can I do this in the CSS?
If I apply opacity
opacity: .5;
directly to the body tag, it actually makes everything except the background opaque.
No, but you can apply a color with transparency on top to simulate opacity.
background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url('image.png');
Related
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 8 years ago.
Can I assign the opacity property to the background property of a div only and not to the text on it?
I've tried:
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity.
It sounds like you want to use a transparent background, in which case you could try using the rgba() function:
rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1) /* 10% opaque green */
background: rgba(51, 170, 51, .4) /* 40% opaque green */
background: rgba(51, 170, 51, .7) /* 70% opaque green */
background: rgba(51, 170, 51, 1) /* full opaque green */
A small example showing how rgba can be used.
As of 2018, practically every browser supports the rgba syntax.
The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
For Less users only:
If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
You could use a mixin like:
.transparentBackgroundColorMixin(#alpha,#color) {
background-color: rgba(red(#color), green(#color), blue(#color), #alpha);
}
And use it like:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
Actually this is what a built-in Less function also provide:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
See How do I convert a hexadecimal color to rgba with the Less compiler?
I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:
rgba(54, 25, 25, .00004);
You can see examples on the left side on this web page (the contact form area).
My trick is to create a transparent .png with the color and use background:url().
This will work with every browser
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements
Check a working demo at CSS Opacity That Doesn't Affect "Children"
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.
A great way to do this would be to use CSS 3 indeed.
Create a div width a class - e.g. supersizer on top of your page:
Then set following CSS properties:
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}
<div class="supersizer"></div>
The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.
Use:
background:url("location of image"); // Use an image with opacity
This method will work in all browsers.
You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.
I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:
Create the two different divs. They'll be siblings, not contained in each other or anything.
Give the text div a solid background color, because that will be the JavaScript-less default.
Use jQuery to get the text div's height, and apply it to the background div.
I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 3 years ago.
I was trying to set the opacity of a image which is the background image of the div. When I used opacity=0.5, then it says "opacity is not known to CSS".
<div style="background-image:url('../Images/MainBackground.jpg');
opacity=0.5" class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
Then I changed the code from the sitemaster page to a seperate css file as shown below.
.main
{
background-image: url('../Images/MainBackground.jpg');
height: 100%;
opacity=0.5;
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
here also it says opacity is not known to css.
I want to set the opacity of div's background image to 0.5. Any help ?
I am using VS 2010 (C# 4.0)
Although the other answer is technically correct, in your case you want the opacity of the background not the entire .main container. You cannot set the background image opacity without affecting the child elements of the page. If you have a white background, you can create a child element that has a width and height of 100% with an opaque white background that will contain the data inside.
<div class="main">
<div class="opaque">
// your content here
</div>
</div>
And the styles with rgba color "white" and 0.5 opacity
<style>
.main {
background-image: url('../Images/MainBackground.jpg')
}
.opaque {
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.5)
}
</style>
This question already has answers here:
How to change color of SVG image using CSS (jQuery SVG image replacement)?
(18 answers)
Closed 6 years ago.
I'd like to use different colors for the svg (lotos flower). Let's say a green one for the in box named TOPS, a red for LOUNGE, white for the rest. I want to set the colors via css.
The svg is referenced as a background image in the css:
background-image: url("https://cdn.shopify.com/s/files/1/1011/6932/t/20/assets/lotos.svg?14455316687248826498");
How can I accomplish this?
Since you cannot manipulate the svg using background-image, you can embed your svg data directly into the background-image property and change the color there.
The value would be quite big though. Consider cleaning your SVG for the web first.
body {
margin: 0;
}
main {
height: 100vh;
background-color: blue;
display: flex;
}
section {
flex: 1;
border: 1px solid white;
}
section:first-of-type {
background: url('data:image/svg+xml,<%3Fxml%20version%3D"1.0"%20encoding%3D"utf-8"%3F>%0D%0A<%21--%20Generator%3A%20Adobe%20Illustrator%2015.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20-->%0D%0A<%21DOCTYPE%20svg%20PUBLIC%20"-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN"%20"http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd">%0D%0A<svg%20version%3D"1.1"%20id%3D"Ebene_1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%20x%3D"0px"%20y%3D"0px"%0D%0A%09%20width%3D"672.71px"%20height%3D"379.628px"%20viewBox%3D"59.351%2081.032%20672.71%20379.628"%0D%0A%09%20enable-background%3D"new%2059.351%2081.032%20672.71%20379.628"%20xml%3Aspace%3D"preserve">%0D%0A<g>%0D%0A%09<title>Layer%201<%2Ftitle>%0D%0A%09<g%20id%3D"layer1">%0D%0A%09%09<g%20id%3D"g2095"%20transform%3D"matrix%280.77583%200%200%200.774211%20112.167%20-7.5811%29">%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path2212"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M366.412%2C114.456c-58.38%2C37.896-99.191%2C124.033-99.191%2C224.206s40.811%2C186.279%2C99.191%2C224.175%0D%0A%09%09%09%09c58.38-37.896%2C99.192-124.002%2C99.192-224.175S424.792%2C152.352%2C366.412%2C114.456z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path2216"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M568.181%2C156.506c-39.405%2C5.773-80.16%2C28.352-115.656%2C63.625c13.473%2C35.391%2C21.188%2C76.214%2C21.188%2C119.688%0D%0A%09%09%09%09c0%2C97.44-38.692%2C181.416-94.532%2C220.812c0.663%2C1.109%2C1.251%2C2.291%2C1.938%2C3.374c68.867-10.087%2C141.899-71.333%2C183.687-162.374%0D%0A%09%09%09%09C606.593%2C310.59%2C605.43%2C215.302%2C568.181%2C156.506L568.181%2C156.506z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3067"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M679.612%2C262.24c-24.545-0.256-50.831%2C4.35-77.406%2C13.437c-0.93%2C41.342-10.987%2C86.244-31.157%2C130.188%0D%0A%09%09%09%09c-41.629%2C90.697-114.269%2C151.783-182.905%2C162.22c0.067%2C0.431%2C0.084%2C0.883%2C0.156%2C1.312c67.332%2C17.63%2C158.454-10.22%2C232.499-77.686%0D%0A%09%09%09%09c74.045-67.469%2C110.246-155.635%2C98.938-224.312C707.112%2C264.091%2C693.642%2C262.387%2C679.612%2C262.24z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3086"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M716.165%2C361.792c-15.06%2C46.788-45.768%2C94.815-90.281%2C135.375c-72.406%2C65.977-161.085%2C93.963-227.938%2C78.688%0D%0A%09%09%09%09c-1.694%2C0.318-3.402%2C0.713-5.093%2C0.969c-0.043%2C0.241-0.092%2C0.482-0.126%2C0.719c59.037%2C36.866%2C154.328%2C37.412%2C245.094-4.969%0D%0A%09%09%09%09c90.766-42.382%2C151.549-115.82%2C161.187-184.751C776.087%2C373.51%2C747.636%2C364.767%2C716.165%2C361.792z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3090"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M165.891%2C156.144c39.405%2C5.773%2C80.16%2C28.352%2C115.656%2C63.625c-13.473%2C35.39-21.187%2C76.213-21.187%2C119.687%0D%0A%09%09%09%09c0%2C97.442%2C38.692%2C181.416%2C94.531%2C220.812c-0.662%2C1.11-1.25%2C2.291-1.937%2C3.375c-68.867-10.088-141.901-71.335-183.688-162.375%0D%0A%09%09%09%09C127.479%2C310.228%2C128.642%2C214.938%2C165.891%2C156.144L165.891%2C156.144z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3094"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M53.72%2C259.802c24.545-0.256%2C50.831%2C4.35%2C77.406%2C13.437c0.928%2C41.341%2C10.986%2C86.244%2C31.156%2C130.187%0D%0A%09%09%09%09c41.629%2C90.697%2C114.269%2C151.783%2C182.906%2C162.218c-0.068%2C0.433-0.087%2C0.883-0.156%2C1.313%0D%0A%09%09%09%09c-67.332%2C17.629-158.456-10.22-232.502-77.688C38.487%2C421.802%2C2.287%2C333.635%2C13.594%2C264.958%0D%0A%09%09%09%09C26.219%2C261.653%2C39.69%2C259.948%2C53.72%2C259.802L53.72%2C259.802z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3098"%20fill%3D"%23FFFFFF"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.84"%20d%3D"%0D%0A%09%09%09%09M16.467%2C358.742c15.06%2C46.788%2C45.768%2C94.815%2C90.281%2C135.375c72.408%2C65.977%2C161.085%2C93.963%2C227.938%2C78.688%0D%0A%09%09%09%09c1.697%2C0.318%2C3.402%2C0.713%2C5.094%2C0.969c0.043%2C0.238%2C0.092%2C0.482%2C0.125%2C0.719c-59.036%2C36.866-154.328%2C37.412-245.094-4.969%0D%0A%09%09%09%09C4.044%2C527.142-56.738%2C453.704-66.377%2C384.773C-43.455%2C370.46-15.003%2C361.717%2C16.467%2C358.742L16.467%2C358.742z"%2F>%0D%0A%09%09<%2Fg>%0D%0A%09<%2Fg>%0D%0A<%2Fg>%0D%0A<rect%20id%3D"_x3C_Slice_x3E_"%20x%3D"59.351"%20y%3D"79.76"%20fill%3D"none"%20width%3D"674"%20height%3D"380.9"%2F>%0D%0A<%2Fsvg>%0D%0A') center center no-repeat / cover;
}
section:last-of-type {
background: url('data:image/svg+xml,<%3Fxml%20version%3D"1.0"%20encoding%3D"utf-8"%3F>%0D%0A<%21--%20Generator%3A%20Adobe%20Illustrator%2015.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20-->%0D%0A<%21DOCTYPE%20svg%20PUBLIC%20"-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN"%20"http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd">%0D%0A<svg%20version%3D"1.1"%20id%3D"Ebene_1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%20x%3D"0px"%20y%3D"0px"%0D%0A%09%20width%3D"672.71px"%20height%3D"379.628px"%20viewBox%3D"59.351%2081.032%20672.71%20379.628"%0D%0A%09%20enable-background%3D"new%2059.351%2081.032%20672.71%20379.628"%20xml%3Aspace%3D"preserve">%0D%0A<g>%0D%0A%09<title>Layer%201<%2Ftitle>%0D%0A%09<g%20id%3D"layer1">%0D%0A%09%09<g%20id%3D"g2095"%20transform%3D"matrix%280.77583%200%200%200.774211%20112.167%20-7.5811%29">%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path2212"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M366.412%2C114.456c-58.38%2C37.896-99.191%2C124.033-99.191%2C224.206s40.811%2C186.279%2C99.191%2C224.175%0D%0A%09%09%09%09c58.38-37.896%2C99.192-124.002%2C99.192-224.175S424.792%2C152.352%2C366.412%2C114.456z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path2216"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M568.181%2C156.506c-39.405%2C5.773-80.16%2C28.352-115.656%2C63.625c13.473%2C35.391%2C21.188%2C76.214%2C21.188%2C119.688%0D%0A%09%09%09%09c0%2C97.44-38.692%2C181.416-94.532%2C220.812c0.663%2C1.109%2C1.251%2C2.291%2C1.938%2C3.374c68.867-10.087%2C141.899-71.333%2C183.687-162.374%0D%0A%09%09%09%09C606.593%2C310.59%2C605.43%2C215.302%2C568.181%2C156.506L568.181%2C156.506z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3067"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M679.612%2C262.24c-24.545-0.256-50.831%2C4.35-77.406%2C13.437c-0.93%2C41.342-10.987%2C86.244-31.157%2C130.188%0D%0A%09%09%09%09c-41.629%2C90.697-114.269%2C151.783-182.905%2C162.22c0.067%2C0.431%2C0.084%2C0.883%2C0.156%2C1.312c67.332%2C17.63%2C158.454-10.22%2C232.499-77.686%0D%0A%09%09%09%09c74.045-67.469%2C110.246-155.635%2C98.938-224.312C707.112%2C264.091%2C693.642%2C262.387%2C679.612%2C262.24z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3086"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M716.165%2C361.792c-15.06%2C46.788-45.768%2C94.815-90.281%2C135.375c-72.406%2C65.977-161.085%2C93.963-227.938%2C78.688%0D%0A%09%09%09%09c-1.694%2C0.318-3.402%2C0.713-5.093%2C0.969c-0.043%2C0.241-0.092%2C0.482-0.126%2C0.719c59.037%2C36.866%2C154.328%2C37.412%2C245.094-4.969%0D%0A%09%09%09%09c90.766-42.382%2C151.549-115.82%2C161.187-184.751C776.087%2C373.51%2C747.636%2C364.767%2C716.165%2C361.792z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3090"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M165.891%2C156.144c39.405%2C5.773%2C80.16%2C28.352%2C115.656%2C63.625c-13.473%2C35.39-21.187%2C76.213-21.187%2C119.687%0D%0A%09%09%09%09c0%2C97.442%2C38.692%2C181.416%2C94.531%2C220.812c-0.662%2C1.11-1.25%2C2.291-1.937%2C3.375c-68.867-10.088-141.901-71.335-183.688-162.375%0D%0A%09%09%09%09C127.479%2C310.228%2C128.642%2C214.938%2C165.891%2C156.144L165.891%2C156.144z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3094"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.8378"%20d%3D"%0D%0A%09%09%09%09M53.72%2C259.802c24.545-0.256%2C50.831%2C4.35%2C77.406%2C13.437c0.928%2C41.341%2C10.986%2C86.244%2C31.156%2C130.187%0D%0A%09%09%09%09c41.629%2C90.697%2C114.269%2C151.783%2C182.906%2C162.218c-0.068%2C0.433-0.087%2C0.883-0.156%2C1.313%0D%0A%09%09%09%09c-67.332%2C17.629-158.456-10.22-232.502-77.688C38.487%2C421.802%2C2.287%2C333.635%2C13.594%2C264.958%0D%0A%09%09%09%09C26.219%2C261.653%2C39.69%2C259.948%2C53.72%2C259.802L53.72%2C259.802z"%2F>%0D%0A%09%09%09%0D%0A%09%09%09%09<path%20id%3D"path3098"%20fill%3D"%23FF0"%20stroke%3D"%23FFFFFF"%20stroke-width%3D"1.6181"%20stroke-linecap%3D"round"%20stroke-linejoin%3D"round"%20stroke-miterlimit%3D"1"%20stroke-opacity%3D"0.84"%20d%3D"%0D%0A%09%09%09%09M16.467%2C358.742c15.06%2C46.788%2C45.768%2C94.815%2C90.281%2C135.375c72.408%2C65.977%2C161.085%2C93.963%2C227.938%2C78.688%0D%0A%09%09%09%09c1.697%2C0.318%2C3.402%2C0.713%2C5.094%2C0.969c0.043%2C0.238%2C0.092%2C0.482%2C0.125%2C0.719c-59.036%2C36.866-154.328%2C37.412-245.094-4.969%0D%0A%09%09%09%09C4.044%2C527.142-56.738%2C453.704-66.377%2C384.773C-43.455%2C370.46-15.003%2C361.717%2C16.467%2C358.742L16.467%2C358.742z"%2F>%0D%0A%09%09<%2Fg>%0D%0A%09<%2Fg>%0D%0A<%2Fg>%0D%0A<rect%20id%3D"_x3C_Slice_x3E_"%20x%3D"59.351"%20y%3D"79.76"%20fill%3D"none"%20width%3D"674"%20height%3D"380.9"%2F>%0D%0A<%2Fsvg>%0D%0A') center center no-repeat / cover;
}
<main>
<section></section>
<section></section>
</main>
Another alternative, which IMO is better, is to add the svg to the HTML, create an svg spritesheet and use svg icons with <symbol> and <use> tags.
This question already has answers here:
Specify an SVG as a background image and ALSO style the SVG in CSS?
(5 answers)
Closed 9 years ago.
I have this css:
div {
display: block;
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(http://s.cdpn.io/3/kiwi.svg) no-repeat center;
background-size: 82px 82px;
border:solid 5px black;
border-radius:200px;
padding:25px;
}
Is it possible to change the svg color from css / jquery?
I dont want to do it directly from html
if not. can I do it to PNG?
http://jsfiddle.net/g8GPf/
Thanks
The simple answer is no. You can't use CSS to style an SVG embedded that way.
However you could use the trick linked by Ravi to change the SVG reference to an inlined SVG.
Another alternative trick would be to change the SVG so that the parts you want to show as the colour are transparent in the SVG. And make the 'background' of the SVG a solid white.
You could then change the background-color of the <div> and it would show through the transparent parts of the SVG.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Can I assign the opacity property to the background property of a div only and not to the text on it?
I've tried:
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity.
It sounds like you want to use a transparent background, in which case you could try using the rgba() function:
rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1) /* 10% opaque green */
background: rgba(51, 170, 51, .4) /* 40% opaque green */
background: rgba(51, 170, 51, .7) /* 70% opaque green */
background: rgba(51, 170, 51, 1) /* full opaque green */
A small example showing how rgba can be used.
As of 2018, practically every browser supports the rgba syntax.
The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
For Less users only:
If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
You could use a mixin like:
.transparentBackgroundColorMixin(#alpha,#color) {
background-color: rgba(red(#color), green(#color), blue(#color), #alpha);
}
And use it like:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
Actually this is what a built-in Less function also provide:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
See How do I convert a hexadecimal color to rgba with the Less compiler?
I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:
rgba(54, 25, 25, .00004);
You can see examples on the left side on this web page (the contact form area).
My trick is to create a transparent .png with the color and use background:url().
This will work with every browser
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements
Check a working demo at CSS Opacity That Doesn't Affect "Children"
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.
A great way to do this would be to use CSS 3 indeed.
Create a div width a class - e.g. supersizer on top of your page:
Then set following CSS properties:
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}
<div class="supersizer"></div>
The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.
Use:
background:url("location of image"); // Use an image with opacity
This method will work in all browsers.
You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.
I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:
Create the two different divs. They'll be siblings, not contained in each other or anything.
Give the text div a solid background color, because that will be the JavaScript-less default.
Use jQuery to get the text div's height, and apply it to the background div.
I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.