I am working on a webpage and I want to put a button on a transparent div that shows the background image. But when I place the button it is also transparent. How can I make it not transparent?
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
Use the rgba() color method instead of opacity:
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
With opacity, the effect applies to the entire element, including child elements and content.
From MDN:
[Opacity] applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
The exception to this rule is background-color set with rgba().
The rgba() color model allows for the opacity to be set via the alpha channel.
So you could set the parent to div { background-color: rgba (255, 255, 255, 0.6); }, and that would set the opacity to 0.6 on the background-color alone. Child elements would be unaffected.
Learn more here: A brief introduction to Opacity and RGBA
For opacity and images see:
Can I set an opacity only to the background image of a div?
CSS: set background image with opacity?
Related
I'm messing around with CSS animations with pseudo elements for the first time.
I have a button that I want a ripple effect on click, without javascript. I'm almost there, but my button's ':before' element keeps setting itself to the width of the container rather than the width of the button.
Is there any way that I can set the dimensions of the buttons ':before' to the dimensions of the button without JavaScript? Also, I'm having trouble with the actual positioning of the :before element, ideally I would like it to perfectly overlap with the button's border. So any advice with that would help a lot!
Here's the codepen (uses sass): https://codepen.io/NotDan/pen/qvKvQv
the effect is working the way I want it to, it's just the alignment and sizing of the :before element that I need help with
Here's the css:
.custom-btn-primary {
display: block;
background: rgba(0, 0, 0, 0);
color: #d98324;
border: 2px solid #d98324;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:hover {
color: #e5a864;
border: 2px solid #e5a864;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:before {
content: "";
background-color: rgba(0, 0, 0, 0);
border: 2px solid #d98324;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.custom-btn-primary:focus {
outline: 0;
background-color: #d98324;
color: #230007;
font-size: calc(1em + 2px);
border: 0;
}
.custom-btn-primary:focus:before {
animation: ripple-out 0.5s ease-out;
}
Here's the html:
<div class="row">
<div class="col-12 col-md-4">
<button class="custom-btn-primary">primary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-secondary">secondary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-light">light</button>
</div>
</div>
I played around with your codepen and found that you just need to add position: relative; to your .custom-btn-#{$color} class.
Your :before pseudo element is already position: absolute but it’s currently positioning itself to the column instead of the button itself.
I have the following code:
.wrapper {
background-color: rgba(0,0,255,1.0);
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
}
<div class="wrapper">some text<span class="inner">other text</span></div>
My intention was that the <span> would have a light red color but instead I got red blended with the wrapper blue.
Is there any easy way to make this work as I expected?
you can put the same span just behind the actual span, but with a white background-color. However, it's not a sustainable solution, and you should not use rgba color to do that.
Due to the use of rgba(255,0,0,0.5); you have an alpha option which causes semi transparency, your best bet is to simply use rgb(255,0,0); without the alpha or optionally set your alpha to 1 rgba(255,0,0,1);
Keep another element that is a wrapper to your span. and give it background white.
.wrapper {
background-color: #5555ff;
position: relative;
padding: 20px;
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
display:block;
}
.fake{
display:inline-block;
background: #fff;
}
<div class="wrapper">
some text
<div class="fake">
<span class="inner">other text</span>
</div>
</div>
Alternate solution:
You can give this color #ff8080 to your span which does not have transparency. It will give the same effect.
Best way is probably to just use a color without opacity, other than that you could just wrap the highlight color with a white background wrapper...
.wrapper {
background-color: rgba(0,0,255,1.0);
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
}
.inner-wrap {
background-color: #FFF;
}
<div class="wrapper">some text<span class="inner-wrap"><span class="inner">other text</span></span></div>
I'm trying to create an "enhanced" radio button by use of an inset box-shadow.
Here's a CodePen of what I got so far
What I'm trying to do is to make the background of the .radio-button <div /> be used as the color of the box-shadow. In my current solution, the color is set to #fff, which works on a white background, but not when the background is gray.
Setting it to currentColor sets the color of the box shadow to the border-color value, which is #333;
Setting it to inherit seems to disable the box-shadow, at least in Chrome. Makes sense in a way I guess, i'm assuming inherit doesn't work for parts of a property like here.
Not setting it at all defaults it to the value of color, which is black.
Is there a way to achieve what I want to do without JavaScript?
CSS does not provide a special value that corresponds to the computed background color of an element akin to currentColor (which corresponds to the foreground color; that is, color — it shouldn't be corresponding to border-color even if it's set to a different value to color).
You could cheat by setting color to the desired background color and background-color: currentColor along with the box shadow, putting the label text in its own element within the label element, and giving that new element the intended font color.
The inherit keyword can only exist by itself in a CSS declaration. It cannot be used as a single component in a set of values. This means while box shadows can inherit, the entire box-shadow property must be inherited in full. When that happens, what ends up inherited is the box shadow of the parent element — which won't work either since the parent has no box shadow.
I still don't fully understand what are you trying to do ...
May be something like that ?
.test {
width: 60px;
height: 60px;
border: solid 2px black;
border-radius: 100%;
margin: 10px;
display: inline-block;
background: radial-gradient(circle, white 10px, transparent 30px);
box-shadow: 2px 2px 6px 0px black;
}
body {
background-image: linear-gradient(to right, red 90px, green 90px, green 180px, blue 120px);
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
CSS doesn't provide much ability to create the 'padding of transparency' that you are looking for, however there is a way with a pseudo-element.
You need to drop the box-shadow and any background on the circle, and instead envisage the central dot as a separate element that will 'float' on top:
.radio-button-input + .radio-button-circle {
display: inline-block;
width: .8em;
height: .8em;
margin-right: .5em;
border: 2px solid #333;
border-radius: 50%;
transition: background-color .1s ease-out;
position: relative;
}
.radio-button-input + .radio-button-circle:after {
content: ' ';
display: block;
background-color: transparent;
transition: background-color .1s ease-out;
width: .55em;
height: .55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%
}
.radio-button-input:checked + .radio-button-circle:after {
background-color: #333;
}
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
I have a div here with a button:
I want the contents of the div to be opaque while still keeping the semi-opaque background color.
The box will contain a menu.
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px;
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;
}
div.calcMenuContents {
opacity: 1;
}
The Run button is contained within the calcMenuContents div:
<div id="calculationMenu">
<div id="calcMenuContents">
<button onclick="runCalculations(2)" class="insideMenu">Run</button>
</div>
</div>
How may I make it so that the calcMenuContents are not semi-transparent?
Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div).
My only issue is that the parent
There is a solution! Use rgba background values and you can have transparency wherever you want :
#calculationMenu
{
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.4;*/
padding: 20px;
}
div.calcMenuContents
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/
use rgba()
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
you can change the background-color into an RGBA, so you would get:
background-color: rgba(106, 166, 217, 0.4);
If I'm right
You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.