This question already has answers here:
How to change text transparency in HTML/CSS?
(10 answers)
Closed 7 years ago.
I'm making a portfolio and I'd like to know how to set a div property that makes the div's TEXT transparent and background and such opaque.
Use rgba and set the opacity to 0 (the last value).
color:rgba(0, 0, 0, 0);
See here
UPDATE
Now that you have clarified your question... SVG would be your best bet. See fill-opacity
Try the red,green,blue,alpha value for the color
div{
width: 50%;
height: 50%;
background: green;
}
p{
font-size: 30px;
font-weight: bolder;
color: rgba(0,0,0,.1);
}
<div>
<p> your text </p>
</div>
Related
This question already has answers here:
Text blended over background color
(1 answer)
Dual-Color Text
(2 answers)
black and white text based on background image with css
(2 answers)
Closed 11 months ago.
So, I was practicing in HTML and CSS as usual and yesterday I started working on a PSD template. It seemed easy for me, but in a few seconds, I bunched in the issue that I am talking about right now.
In general, I want to change the exact part of a text based on its background. I've already tried "mix-blend-mode", but unfortunately, the result wasn't satisfying for me.
Here is what I want.
So, as you can see the text before the center is white-colored, but the text after the center has the same color as the background before the center.
Is there any way to do that using CSS or maybe even Javascript.
You could do something like this:
<style>
.container {
display:block;
position:relative;
width:150px;
height:50px;
text-align: center;
}
.black-half div {
background: #000;
color: #fff;
}
.white-half div {
background: #fff;
color: #000;
width:150px;
}
.white-half {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
}
.black-half {
height: 100%;
position: absolute;
}
</style>
<div class="container">
<div class="black-half">
<div>Split background and text color</div>
</div>
<div class="white-half">
<div>Split background and text color</div>
</div>
</div>
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 2 years ago.
i have a div as follows
https://prnt.sc/w84dzj
div.button.fill {
color: #FFFFFF;
background-color: #ffcc00;
}
I'd like to color, not the whole, but only half the circle in a given color, and the other half in another color (maybe by using two classes called leftHalf and rightHalf).
the code i am trying is, if the leftside half is white, the inside image should be half blue so the user should know that they have completed half profile and when they are done with profile, it will display just like the above image
You can do that by using background-image: linear-gradient(...) like this.
div {
color: #FFFFFF;
background-image: linear-gradient(90deg,red 50%,yellow 50%);
height: 100px;
width: 100px;
border-radius: 50px;
}
<div></div>
Also if you don't set a presentage after
each color they will have a smooth transition.
You can also add in as many colors as you want.
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I am trying to make a foot print for a cool look, but it won't show
here's my code:
.footprint {
width: 100px;
height: 50px;
border-color: gray;
border: 3px;
border-radius: 20px;
}
<div class="footprint"></div>
welcome to SO!
Somebody already found a solution to your problem here:
CSS Property Border-Color Not Working
A div by default has no border-style and no border-width, therefore the border will not be shown.
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 3 years ago.
I understand that this question may have been answered before, but I am having trouble, only setting the opacity to the background (container), but not the text, but when i set the opacity on the container, then it also sets it on the text.
I have tried researching on google and even on here, but nothing seems to work
html
<div class="container">
<div class="test">
<div class="title">
<h3>"The Rising Dead"</h3>
</div>
</div>
</div>
css
.container{
background-color: rgba(255, 0, 0);
opacity: 0.5;
width: 1350px;
margin-left: 280px;
height: 500px;
}
.title h3{
opacity: 7;
}
Screenshot:
https://imgur.com/rATgSiz
Any help appreciated and thanks in advance
rgba has opacity itself, it's 4th parameter:
rgba(255, 0, 0, 0.5)
This question already has answers here:
How to modify the fill color of an SVG image when being served as background image?
(24 answers)
Closed 4 years ago.
Currently I create buttons with icons by using the button's background, like in my example (this is probably the reason for my problem).
I would like to know if it is possible to change the colour of the icon from the CSS? Because at the moment we have to save the same icon multiple times for different colors (black, white, colored versions etc.)
If this is not possible and I have to use , could someone please show me an example of making an svg type button and how to then change it's color.
.btn-icon {
border: 1px solid black;
height: 40px;
width: 40px;
padding: 0px;
background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
background-size: cover;
}
<button class="btn-icon"></button>
For Adel's answer in this question Modify SVG fill color when being served as Background-Image
This seem to be an amazing solution for me:
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
I think you should used
background-color: yellow;
In CSS