I'm trying to make an image and text with an opacity!
Background appear in the same div without using the image as background. How can I make this work?
Kindly see image:
<div>
<span>Title</span>
<img src="" />
</div>
div{
position: relative;
}
span{
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
padding: 6px;
display: block;
}
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);
For rgba the last field is the opacity. It's not fully supported in some older IE versions though so the only fully cross browser method at the moment is to use a transparent image as the background.
The first thing you should do is to write HTML:
<figure>
<img src="/image.jpg">
<figcaption>Title</figcaption>
</figure>
After that you only have to write CSS: example:
figure {
position: relative;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3); // or transparent gif
}
When you write background-color:rgba(0,0,0,50); the background will be black and semi-transparent.
It won't affect the transparency of the text because to set the transparency of the text, it's color:rgba(255,255,255,50); If you don't write that, the text won't be semi-transparent.
Related
Can anyone guide how to make image darker from bottom? I want to design the following box via tailwind css.
Currently, I tried by adding image as a normal div element(not background image) and then added the text div as absolutely positioned but I realise that the image should be in background and text should added as static div. Can you please suggest how to make the image darker as above attached picture?
You have a couple options for making an overlay over an image.
For a background-image property, you can define a gradient before the image URL. E.g.
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 35%), url('image.jpg');
For an <img> tag, you can use a pseudo-element to create an overlay.
Here's one of many approaches you can take. E.g.
<head>
<style>
.overlay {
position: relative;
}
.overlay img {
width: 100%;
height: auto;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 35%);
poionter-events: none;
}
.overlay-content {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
padding: 1em;
}
</style>
</head>
<body>
<div class="overlay">
<img src="https://placekitten.com/500/300" alt="An image" />
<div class="overlay-content">
<p>Some text<p>
</div>
</div>
</body>
I wondered if it was possible to create two background-colors for a div an overlay them.
I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.
Without understanding why you want this, it can be done by using solid color gradients: fiddle.
body {
background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
linear-gradient(white, white); /* first bg is on top of this */
}
Though Adrift's answer is the way to go, you can also use pseudo elements for this.
body {
background: white;
position: relative;
}
body:before {
content: "";
position: absolute;
top: 0;
left; 0;
width: 100%;
height: 100%;
background: rgba(220,14,120,0.5);
z-index: 1;
}
/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
z-index: 2;
position: relative;
}
Here is a fiddle.
However, this is not production friendly:
Setting position relative on body and all other elements when not necessary
Setting unnecessary z-index on all elements
The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.
You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:
JSFiddle
HTML
<div class="one">
<div class="two"></div>
</div>
CSS
div {
width: 100px;
height: 100px;
}
.one {
background-color: #fff;
}
.two {
top: 0;
left: 0;
background-color: rgba(0,0,255,0.2);
}
To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.
Although I would consider a different method like this:
Structure:
<div class="parent">
<div class="white"></div>
<div class="color"></div>
</div>
CSS:
.parent {
position: relative:
}
.white, .color {
position:absolute;
top: 0px;
left: 0px;
}
.white {
z-index: 9998;
}
.color {
z-index: 9999;
}
You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.
To achieve multiple background colors in CSS, a common proposal is
Solid Color Gradients
But there is an alternative:
Solid Color background-images via SVG Data URIs
The working example below contains the following areas with the following background colors:
<main> - dark-gray
<section> - light-gray
<div class="circle"> - translucent red
In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.
We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.
The Approach
The approach is to give div.circle.does-not-blend:
the same initial background-color as <main>
an SVG Data URI background-image with the same translucent red background-color as the other .circle elements
The SVG background-image
The SVG Data URI background-image looks like this:
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E
The Result
In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend
Working Example
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
padding: 0 9px;
background-color: rgb(127, 127, 127);
border: 1px solid rgb(0, 0, 0);
}
section {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0 0 66%;
background-color: rgb(191, 191, 191);
height: 162px;
}
.circle {
display: inline-block;
width: 120px;
height: 120px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 120px;
background-color: rgb(255, 0, 0, 0.5);
border-radius: 50%;
}
.circle.does-not-blend {
background-color: rgb(127, 127, 127);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
<div class="circle"></div>
<section>
<div class="circle">Incorrect</div>
<div class="circle does-not-blend">Correct</div>
</section>
</main>
I just trying to put a background color (rgba) with an image, but doesn't work.
My CSS is:
section{
width:100%;
height:400px;
background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}
I just trying to put with diferent positions, like background-image, or just background, but doesn't work.
As I pointed out in comments, background color behaves as a fallback for the background image, unless the image is transparent:
section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}
If you want to cover the image by an overlay layer (using rgba()), you can create a pseudo-element and position that as absolute the use left, top, right and bottom properties to expand the overlay, as follows:
.box {
background: url(http://lorempixel.com/500/500) no-repeat center center;
position: relative;
}
.box:after {
content: ' ';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* Fill the entire space */
background-color: rgba(0,0,0,.4);
}
WORKING DEMO.
Does it have any content?
If so, you can use z-index property to move the overlay beneath the content which is wrapped by a relative positioned <p> element with a higher z-index value, as follows:
<section class="box">
<p>Content goes here...</p>
</section>
p {
position: relative;
z-index: 2;
}
.box:after {
content: ' ';
position: absolute;
z-index: 1;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,.4);
}
UPDATED DEMO.
Use transparent PNG as a background image and then you can see both color and image together.
section {
width:100%;
height:400px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}
You can use rgba within the same declaration
DEMO http://jsfiddle.net/b6vzN/1/
background:url(../img/background2.jpg) no-repeat rgba(0,0,0,0.5);
If you wish to assign it seperately as in your example then you need to specify background-image, not just background
background-image: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.
I think using a background gradient with a hard transition is a very clean solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Here are the examples in action: http://jsbin.com/iqemot/1/edit
You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
JSFiddle
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
JSFiddle
Resources:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Using jQuery how to get click coordinates on the target element
This method words on different sized windows and fills the screen. Even works on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by #timlg07
.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Method 1:
<div class="triangle"></div>
body {
margin: 0;
}
.triangle {
background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
height: 100vh;
}
https://codepen.io/x-x00102/pen/ZEyEJyM
Method 2:
<div class="triangle"></div>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.triangle::after {
content: '';
position: absolute;
border-top: 100vh solid LightGray;
border-right: 100vw solid Salmon;
}
https://codepen.io/x-x00102/pen/VwWwWGR
Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.
The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).
/* Cruft for the demo */
body {
margin: 0;
padding: 0;
}
.gray-block {
background-image: linear-gradient(to bottom right, #000, #ccc);
color: #fff;
}
.gray-block__inner {
padding: 20px;
}
/* The actual solution */
.diagonal-end::after {
content: "";
display: block;
margin-top: -6vw; /* optionally move the diagonal line up half of its height */
border-top: 12vw solid transparent; /* change 12vw to desired angle */
border-bottom: 0px solid transparent;
border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
<div class="gray-block__inner">
<span>Some content</span>
</div>
</div>
is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.
Here is the CSS.
.email {
background: url(../images/email.gif) 0px 0px no-repeat;
margin: 0px 0px 0px 0px;
text-indent: 20px;
display: inline-block;
}
.email:hover {
opacity: 0.8;
}
Here is the xHTML.
Email
Short answer: No.
Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
For background images, use a PNG with alpha channels.
Not with a background image (you can if it's just a background color). Instead of using opacity, replace the background image with less opaque version in .email:hover.
Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!
<div id="TransContainer">
<div id="TransBox" href="#">Some text that will be opaque!</div>
<div id="NonTransText">Some text that I do not want opaque!</div>
</div>
<style>
#TransContainer
{
position: relative;
z-index: 100;
display: block;
width: 420px;
height: 165px;
background-color: blue;
}
#TransBox
{
background-color: green;
display: block;
width: 100px;
height: 100px;
opacity:0.4;
filter:alpha(opacity=40)
}
#NonTransText
{
color: #000;
position: absolute;
top: 20px;
left: 0;
}
</style>