I have an image saved in my assets folder, it's a banner image and i'm displaying some text over it. I was using a linear gradient to make the text more readable and it looked nice, for some reason this just stopped working. (I didn't even change anything)
this is what I think SHOULD work:
background-image: url('banner_img.jpg'), ( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )
but Rails will only load the image if I use:
background: image-url('banner_img.jpg')
adding a linear gradient to this does not work.
Any ideas?
thanks
Here is my code for you.
HTML
<div class='foo'></div>
CSS
.foo {
position: relative;
background-image: url('http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg');
width: 400px;
height: 200px;
}
.foo:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, red, orange);
mix-blend-mode: color;
}
Look codepan.
Related
I want to put two images in my ionic app like this.
and later this
i am testing this
ion-content {
background: url('../assets/imgs/Untitleddesign.jpg'),
url('../assets/imgs/Untitleddesign2.jpg') no-repeat !important;
background-size: cover !important;
}
You can load the first image as background-image and use background-color for the second
ion-content {
background-color: #ececec;
background-image: url('../assets/imgs/Untitleddesign.jpg');
}
But you could get the same effect even without images
ion-content {
background-color: #ececec;
background-image: linear-gradient(152deg, #7e6ecc 40%, #ececec 40% 100%);
}
To make the shape go over the content and partially cover it during the scroll you can use the gradient with transparency in an element positioned absolutely.
ion-content::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 99;
pointer-events: none;
background-image: linear-gradient(
152deg,
#7e6ecc 20%,
rgba(0, 0, 0, 0) 20% 100%
);
}
see: https://codepen.io/dpu/pen/VwLBZEQ
I have an image which covers an entire element using something like #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}
Next, I would like to gray out the left side of the image similar to that shown below.
How can this be accomplished? It doesn't need to look exactly the same, but only similar.
You may use linear-gradients since you use background-image
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */
url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */;
background-size:
auto,
auto,
auto 100%;
}
you could play with a pseudoelement and a RGBA background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
Please do not vote for this answer as it was user3791372's comment (yet not yet an answer) and not mine. If you think it is the right approach, please provide a comment why you think so.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}
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.
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>
I have a requirement to have a div with a background image, and overtop that image should be a 0.7-opacity black layer.
For this, I'm using:
background-color:rgba(0, 0, 0, 0.7);
background-image:url(/Images/hash-000000-pattern.gif);
This works perfectly in everything but IE. In IE 6, 7, and 8, the background-color:rgba(0, 0, 0, 0.7); isn't rendered.
Is there anything I can do in CSS without changing the markup to create a dimmed-opacity black layer over the background image? Some "filter" style?
No. The only options you have are ms-filters or a slightly different one.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
see this one too: http://www.hedgerwow.com/360/dhtml/rgba/demo.html
I had a similar issue and to over come it I used to classes on my modal div one for the background opacity etc.. the other just to display the spinner. This route seems to work for all current browsers I've tested on.
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(255,255,255, .8);
background-color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.spinner{
z-index: 1010;
background-image: url(/_Layouts/Images/GEARS_AN.GIF);
background-position: 50% 50%;
background-repeat: no-repeat;
}