I am trying to inherit the background of breadcrumbs element from the father div through its CSS configuration but I fail.
I was trying to set its CSS to background: transparent or inherit but it fails.
here is a link where this issue happens - the breadcrumbs has grey background while I want it to be white as the reset of the page.
Link to the problematic page: http://doitonlinediy.com/?s=page
Any thoughts/idea why I fail to set it ?
The background color is displayed is set into the body's css
#body {
background-color: #e1dedf;
}
Remove it or replace it and set the background color on your breadcrumb only
while strolling on your website sample I found out that whenever you set your breadcrumb background color to inherit parent's background style it always gives you the grey color. That's because of your body css background.
body.custom-background {
background-color: #e1dedf;
}
Try to change the background and you're good to go.
Your problem is the
body.custom-background
u can do something transparent by using RGBa, Like this..
h1 {color: rgba(123, 88, 9, 0.5);}
the value(123, 88, 9) are using for color, and the value (0.5) is using for transfarent..
Related
Here's the code at codepen: https://codepen.io/anon/pen/gGjyNz
What I am trying is to put blue or green lines under background (gray). As you see, if I set
`<li class=''>Launch</li>`
to
`<li class='visited'>Launch</li>`
what happens is that it covers the whole gray line completely, while I want it cover, but nicely, with box-radius working. Otherwise it is clumsy and has sharp edges.
UPDATE: I want background to cover blue or green, so when gray turns blue or green, it also inherits gray's, with fancy box-radius, etc.
On line 19 of your css there is a class I added the property z-index to:
ul.checkout-bar li
as
z-index: 100000;
It's so high because that bar is currently set to 99999.
To fix the ending, add:
border-radius: 15px;
after line 165 in your css. The :after never received that property to become curved
On our site http://reiner-lemoine-institut.de/ueber-uns/team/kathrin-goldammer/, whenever the window is minimized to a certain size, a blue block appears over part of the text.
I have added a screenshot that specifies the exact place within the code that seems to be affected. I am not an expert in CSS or HTML, so I am hestitant to change the code myself:
Apparently though, the problem appears when the div.column_attr = exactly 339.833 x 908. Anything below this size or above it is fine.
I had a play around with your CSS and think I found what your problem is.
.get_in_touch, .infobox {
background-color: #0f3b64;
}
if you remove/comment out this background-color your problem should be fixed.
This is caused by the following line:
.get_in_touch, .infobox {
background-color: #0f3b64;
}
Change to transparent should solve the problem:
.get_in_touch, .infobox {
background-color: transparent !important;
}
Your theme has a custom.css file to put your custom styles in it and is located at: css/custom.css so try to add the above code there.
I have a answer for your question. The following class has a background color in your css file. You can remove thet color if not required in the website.
.get_in_touch, .infobox{background-color: #0f3b64}
Or you can use where inline background image is define i.e in infobox
.infobox{background-size:cover;}
Can anyone please explain to me what is going on over here, I am trying to override the background color to dodgerblue but for some reason the white background color is also being rendered underneath it.
I have the following snippet inside my css file.
.modal-content {
color: $dropdown-text;
background-color: dodgerblue ;
opacity: 0.9;
}
I have an angular 2 project and for some reason I cannot override the background color.
Here are the outputs with and without the white background color.
Here is the other one.
Any help with is will be much appreciated.
It's simple. You use opacity. Set opacity: 1 to modal-content
It looks like your opacity needs to be set to 1 not 0.9.
Also check that your css rule is the last one to be run by the browser. If you're trying to overwrite a rule, you need to load your libraries' css files in the header first, then your style.css last so you're changes overwrite the base library styles.
Why second time opacity show 0.5 it should be as in first 0.9. and also modal content should not be with opacity, it should be hard without opacity.
Set below property to modal instead of modalContent.
Also try with important property for back-color;
.modal, modal {
color: #7d7d7d;
background-color: dodgerblue !important ;
opacity: 1;
}
I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org
You will probably want to set the color of the element and then apply the opacity to it.
.transparent-style{
background-color: #ffffff;
opacity: .4;
}
You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/
Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.
You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.
.transparent-style{
background-color: rgba(255, 255, 255, .4);
}
Using RGBA over opacity means that your child elements are not transparent.
When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.
Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/
All you need is this:
#ffffff00
Here the ffffff is the color and 00 is the transparency
Also, if you want 50% transparent color, then sure you can do...
#ffffff80
Where 80 is the hexadecimal equivalent of 50%.
Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80
And since in transparent we want 0 opacity, we write 00
#0000ffff - that is the code that you need for transparent. I just did it and it worked.
You can specify value to background-color using rgba(), as:
.style{
background-color: rgba(100, 100, 100, 0.5);
}
0.5 is the transparency value
0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.
According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).
{background-color: transparent;}
If you are looking for android apps, you can use
#00000000
Yeah I think the best way to transparent the background colour (make opacity only for the background) is using
.style{
background-color: rgba(100, 100, 100, 0.5);
}
Above statement 0.5 is the opacity value.
It only apply the opacity changes to the background colour (not all elements')
The "opacity" attribute in the CSS will transparent all the elements in the block.
Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.
Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.
.some-class{
background-color: #fafafa;
}
to
.some-class{
}
input[type="text"], input[type="password"]{
opacity:0.5;
}
This fades both - input body and border. I don't want border transparent, just body, so the underlying image is visible. User-text inside the input should not be transparent, of course.
input [type="submit"]{
margin-left:50px; // here nothing works at all.
}
The opacity property influences the opacity of the whole element. Your question is bit vague, but I assume that you want to have a semi-transparent background, while the content and borders shouldn't have transparency.
To do so, you need to set a semi-transparent background to the element. This is called alpha-transparency, as a fourth color channel - the alpha channel - is used to store the transparency information (usually in an image like a PNG).
In modern browsers you could use the rgba() value for the background property:
/* semi-transparent white background */
background: rgba( 255, 255, 255, .5 );
In MS IE you could use a gradient filter, which supports ARGB colors since MS IE 5. Just fade from a color to itself: (be aware, that the alpha channel comes first and all four color values are noted as two-digit hexadecimals)
/* the same for IE 7+8, should get included in a separate MS IE specific stylesheet */
background: none;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
Opacity works on the whole text input including the text inside it. So your code won't work.
Option 1) Can you use CSS3? If so, use (with the color you want, of course):
background-color: rgba(255,0,0,0.5);
Option 2) You can set the background of the Input as the image you want to see.
Option 3) You can set the background as a semi-transparent solid color image (.gif/.png, which can be 1x1 in size and repeated in X and Y).
For the submit, you need to get rid of the space in your selector:
input[type="submit"]{
margin-left:50px;
}
And you can't specify what parts of the element you want to make transparent with opacity. It applies to err'thang. There might be 'hacks' of sorts to achieve what you want, such as using a wrapping div to create the border.