100% transparant text inside div with solid background [duplicate] - html

This question already has answers here:
Transparent text cut out of background
(14 answers)
Closed 7 years ago.
How can you display a text 100% transparant inside a div with a solid background so that the background is visible inside the text?
So I have a background image on the body, a div with a solid background color and I want the text to be 100% trasparant so the background-image of the body is visible through the text.
I hope you know what I mean :D

Yes, it can be done with background-clip:text --- a css3 property. Also you need to add the background image for text. This will solve your issue, but may support for all the browsers.
h1 {
font-family:'...';
font-size:25px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background:url(url/image.jpg);
background-position:bottom;
background-size:cover;
}
Reference: https://scotch.io/tutorials/text-backgrounds-and-gradients-with-background-clip
Also, I have found a similar post in stackoverflow: Transparent text cut out of background
This is great: http://jsfiddle.net/JGPuZ/1/

Related

How to add an image as a background on both sides of the screen? [duplicate]

This question already has answers here:
CSS: background image on background color
(13 answers)
Why can't I use background image and color together?
(10 answers)
Closed 3 months ago.
Ok so I´m trying to put an explosion gif on both sides of website cause it looks cool but I can´t figure out how to do it and keep the original background color on the parts that aren´t part of the gif.
background-color: #270436;
background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("explosion.gif") right repeat-y;
I used this from another post i saw and it didn´t work
Simply move the background-color property after the background property, since now, your background image is taking priority the background color:
body {
background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y;
background-color: #270436;
}
Or, alternatively, add the color as part of the list of background properties:
body {
background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y, #270436;
}
Add the background-color property after the background property .
body{
background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") right repeat-y;
background-color: #270436;
}

Why does CSS border background color inherit content background color? [duplicate]

This question already has answers here:
How to hide the background underneath the border
(4 answers)
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 2 years ago.
I'm learning the box model in CSS and am confused why when dotted-border is applied the border inherits the color of the content background color?
In the snippet below, shouldn't the dotted border be a color combination of black and light blue since the box model suggests that a border goes around the padding and content? Instead orange and black are shown.
I'm struggling to understand how the content background color is shown?
Apologies if my explanation is confusing but help will be appreciated.
body {
background-color: lightblue;
}
.content {
background-color: #fdad5c;
padding:0px;
border: 5px dotted black;
margin: 0px;
}
<body>
<div class = 'content'> Content </div>
</body>
I know what you mean. But borders in CSS are always using the space of the element, in which they are. That's why in your example, the dotted line is "inside" the yellow box and not outside.
An alternative to borders would be the outline attribute, which in your example would be outside the yellow box.
Further information:
https://www.tutorialrepublic.com/css-tutorial/css-outline.php

Curved bottom border with background-image [duplicate]

This question already has answers here:
Can I ellipse a clipping mask on the bottom only?
(1 answer)
Can I create a div with a Curved bottom?
(5 answers)
Closed 3 years ago.
I have a big problem finding a solution to this problem.
I have seen many samples of creating a container with curved bottom border exactly as I want but they all have plain or gradient background-color.
I need a container with a background-image and a curved bottom border and a bottom border color like you see in the picture.
The problem with all samples which I have seen is that the background-image gets distored if I use the common way of applying the bottom border using CSS.
This is a plain and simple html structure so if you want to help, you have a reference.
<div class="wrapper" style="background-image:url('images/someimage.jpg');">
<p>some text on the background image</p>
A button
</div>
Thanks in advance.
Have a look into using clip-path, it's not a perfect solution and will require some tweaking of the numbers to get it to look how you wish.
See the below example:
main {
height:500px;
background-color:#ccc;
}
.wrapper {
background-image:url('https://picsum.photos/id/1039/1280/720');
background-repeat:no-repeat;
background-position:center;
height:350px;
clip-path: ellipse(100% 60% at 50% 40%);
}
<main>
<div class="wrapper"></div>
<h2>This is some more content</h2>
</main>
JSFiddle
More Information can be found: CSS-Tricks

background as a triangle [duplicate]

This question already has answers here:
Splitting Text Color with CSS when compared to the background
(4 answers)
Invert colored text related background
(2 answers)
Closed 4 years ago.
I'd like to have a background on my website in the shape of a triangle. with on the left side de color black and on the right side the color white. See this image for an example. I can't find this on the internet so I hope someone can help me with it. I'd like to do this with css if this is possible.
And maybe you can also help me with the text. I mean that as the text is on the black side it turns into a white color. And if de text is on the white side it turns into a black color. See this image for an example. I hope you guys can help me with this. I would really appreciate that!
thank you in advance!
i made with mix-blend-mode:difference;
div {
width:400px;
height:400px;
background:linear-gradient(45deg, black 0%, black 50%, white 50%, white 100%);
display:flex;
justify-content:center;
align-items:center;
}
h1 {
color:#fff;
font-size:30px;
mix-blend-mode:difference;
}
<div>
<h1>this is a text</h1>
</div>

CrossBrowser transparent text with css [duplicate]

This question already has answers here:
Transparent text cut out of background
(14 answers)
Closed 7 years ago.
What I have is a div with a background image, inside such div I have another element which is smaller and has a background colour of white. Inside this element I have text which I wan't to be transparent, so we can see background image of first div.
Tried applying color: transparent; but it doesn't seem to work. Is there reliable, css method to achieve this?
You can't. The only way to do anything like this is to have the "background with the text taken out" be an image that you put on top of the background image.
Actually this is possible with CSS only. In your smaller element with the white backgound you could use CSS3 with a fallback for IE 6-8. For the fallback you could use a transparent PNG.
the CSS3 code for the white bg would be:
background-color: rgba(255,255,255,0.5)
I set up a codepen for you to see the code in action.
http://codepen.io/DheerG/pen/tkKqC
Also if you want everything in the smaller element to be transparent, you could just use the css opacity element.
opacity: 0.6;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* IE 5-7 */
filter: alpha(opacity=60);