How can I increase the content transparecy with CSS? - css

I want my content be more transparent, I've added the following CSS code:
.hentry {
background-color: transparent;
border: none;
}
How can I increased that value?
Thanks for the help.

You can use rgba() color codes:
the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).

If you want the content to be transparent, you can do this with the help of opacity CSS
.hentry {
opacity: 0.8;
}
0.8 is the value, you can define anything between 0 to 0.9 in that depending upon your requirement

Related

Fullcalendar events have desaturated background color

I'm using fullCalendar's resource-timeline views and I have noticed that the event background colors are de-saturated.
I have used different ways to set their color, including setting all event background colors with CSS, and everything works (i.e. I have no problem changing the event colors), except that the colors lack saturation.
For example, using CSS like this:
div#calendar {
background-color: red !important;
}
.fc-timeline-event {
background-color: red !important;
}
I would expect both the table background and the events to be saturated red. The background is, but the events are not. Checking with a color sampler shows that the background is #ff0000, but the cells are #ff5952, which corresponds to red saturated to 68%.
Strangely enough the browser inspector shows the computed background color as #ff0000.
Any ideas on how to achieve a display with fully saturated colors?
I have my solution.
In your CSS style code, you put the code below
.fc-bgevent {
opacity: 1;
}
The number 1 above can be changed to 0.9, 0.8 etc. It will replace the background event style.
And it works for me!
Fullcalendar CSS contains a rule that overlays the calendar with white, opacity 25%. This causes the problem
:
.fc-event .fc-bg {
z-index : 1;
background; #fff;
opacity: 0.25
)
The opacity needs to be set to 0. So Added this in my own stylesheet:
.fc-event .fc-bg {
opacity: 0 !important;
}

Set CSS color using color text name like "red" and also set opacity?

Is there a way to set a CSS color using a color text name and also set opacity?
Something like:
color: lightgray alpha 0.5
Or do I have to use RGBalpha, like:
color: rgba(211,211,211,0.3)
It's not possible to combine color text names and alpha.
You can handle your problems two ways
Advised: Translate the color text name to rgb so lightgray = 211,211,211
span.lightgray {
color: rgba(211,211,211, 0.3); // Your own suggestion
}
Not advised: Use the color text name and opacity, but opacity applies to the entire element (so background or other properties will also be transparent/affected)
span.lightgray{
color: lightgray;
opacity: 0.3; // Not advised
}
As far as the MDN documentation on this tells us, you should be using rgba(r,g,b,a) or even hsla(h,s,l,a) if you want to pick a color with alpha. So it is not possible to do what you were trying to achieve using the first way you showed.
You can use opacity.
But this will affect both background-color and color.
#txt {
color: red;
background-color: lime;
opacity: 0.5;
}
<span id="txt">TEST</span>
You can use RGBalpha or HSL or HSLA.
eg:
1) RGBA:
rgba(255, 0, 0, 0.2);
red-255
gree-0
blue-0
aplha(opaque or transperant)-0.2
2) HSL:
hsl(120, 100%, 50%)
Hue is the degree of colour in the wheel - 120.
Saturation - 100%
Lightness - 50%
https://www.w3schools.com/css/css3_colors.asp
We can also use the opacity property like
div {
opacity: 0.5;
}
But opacity property will add transparency to the background. so all the child element will become transparent. So it might be difficult to read. So it is better to use HSL or RGBA

css - Unsupported CSS Property Transparency in codename1

I am getting following exception in codename1
CSS> java.lang.RuntimeException: Unsupported CSS property Transparency
Code used by me is as follow :-
Form {
Background Color: 0xffffff;
Transparency: 255;
}
What should I do to fix it ?
Try
Form {
Background Color: rgba(255,255,255,0);
}
or
Form {
Background Color: transparent;
}
One of theses three should do the trick
You can set the color to a value using:
background-color: #ffffff;
Opacity is implicit when you define it this way. You can use transparency using:
background-color: transparent;
You can set the background transparency along with the color name
form{background-color:rgba(255,255,255,0.3);}
RGBA stands for Red Green Blue Alpha. Here the Alpha defines the transparency.
You can set the 0.3 to 0 to make it completely transparent.
Try this
You can learn more about transparency here:
https://www.w3schools.com/cssref/css_colors_legal.asp
if css is the same in java then the correct syntax would be:
Form {
background: #ffffff;
filter: opacity(0.5);
}
the filter property should be between 0 and 1 where 0 is 0% and 1 is 100%

CSS3 Change text opacity without affecting stroke

Have a unique issue here. I'm trying to set some text to completely opaque, while still keeping a visible stroke on the text. I'd like to be able to see through the text as the background is dynamic, so I can't simply set it to the color of its backround.
Here's what I've got, but opacity is overwriting the stroke:
#special {
opacity: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Help appreciated!
The opacity affects all visual properties of the object.
But, what about this?
#special {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: transparent;
}
JsFiddle: http://jsfiddle.net/fdLecLan/2/
About the opacity, the W3schools says:
The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.
So setting it to 0 will make it totally transparent, but is important to remember that it stills stay in the View port, and stills interact with user (So, if it's a button or link, it'll still be clickeable...)

Can I set the opacity of a background url and the opacity of the background color itself?

Is it possible to set the opacity of a background url image to be .8 and the background color opacity to be .2?
This is what I tried, however it doesn't seem to work.
#tagholder:hover {
background: rgba(255, 0, 0, 0.8) url("../images/arrow-white.png");
background-repeat:no-repeat;
background-position: center;
background-color: #293333;
opacity: 0.2;
}
The short answer is no. EDIT: Actually the short answer is yes, see below. Opacity acts like a multiplier on any rgba values present within the same element. Consider this:
div {
background-color:rgba(0,0,0,0.5);
opacity:0.5;
}
The background opacity of 0.5 (the alpha value) effectively* becomes 0.25 when multiplied by the opacity: 0.5 x 0.5 = 0.25. See this fiddle.
*I say effectively because the colours are slightly different, but it's virtually impossible to tell with the naked eye.
EDIT: As #vals pointed out, you can get the effect originally asked for:
#tagholder:hover {
background: rgba(255, 0, 0, 0.25) url("../images/arrow-white.png");
background-repeat:no-repeat;
background-position: center;
opacity: 0.8;
}
This would give the whole element an overall opacity of 0.8, while the background colour would have an opacity of 0.2 (0.8 * 0.25 = 0.2). Note, this would also affect the opacity of borders and text colour as well.
No, while using opacity, it is not possible. Opacity will turn the whole block & its content to opacity: 0.2; if you use that.

Resources