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>
Related
This question is a continuation of one that asked before
how to add a gradient over a leaflet map?
I'm trying to add a text overlay over the left side of my leaflet map, which has a black-transparent gradient background from left to right.
Modifying my text, which is set to white with css, to load after the map doesn't seem to work. Can anyone tell me what I need to do to have my text show up over the map? Thanks!
<style>
#map-id {
height: 100%;
width: 100%;
position: absolute;
}
html,body{margin: 0; padding: 0}
#map-id:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
pointer-events: none;
z-index: 999;
}
#menu-text{
display: inline-bloc;
}
#menu-text:before{
position: absolute;
content: '';
height: 100%;
width: 100%;
color: white;
pointer-events: none;
z-index: 999;
}
</style>
<div id="map-id">
<script type="text/javascript" src="{% static "js/map.js" %}"></script>
</div>
<div id="menu-text">
<h1>
This is the text that should be showing up, but isn't.
</h1>
</div>
The side appears black with no white text.
You have already working example in the reply of your last question.
http://codepen.io/hkadyanji/pen/bwNLKK
Your code is broken, <script> tag should not be placed into <div id="map-id">
It's it possible today to do a transparent color overlay process on a single div? for example if I have the following HTML code
<div class="flower">
</div>
and I have the following html...
.flower {
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.flower:after {
background:#FF2400; opacity:0;
}
.flower:after:hover {
opacity:0.7;
}
So when someone hovers over this, they see a tinted red flower. Can we do something like this today with a single div?
There are at least 2 methods of doing this.
Method 1.
Overlay the whole div.
NB.This will also affect any content that may be inside the div.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.overlay {
position: relative;
background: url(http://lorempixel.com/output/nature-q-c-200-200-4.jpg);
}
.overlay:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 1);
opacity: 0;
}
.overlay:hover:after {
opacity: .5;
}
<div class="box overlay">
</div>
Method 2.
Since you are using a background image, we can add another background image on top of the first by way of a linear gradient with a single color and RGBA properties.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.bgimage {
background: url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
.bgimage:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
<div class="box bgimage">
</div>
This has the advantage of not affecting the content of the div.
I'm sure there are other methods but these are the first two that came to mind.
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'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.