How do I set background: none with Tailwind?
bg-none sets background-image: none (see the documentation), which can have different behavior.
I like to use bg-transparent This is only really useful when trying to remove the background color/image from an element that already has a background colour/image on it for some other reason, if you don't declare background color at all the element will never have one (obviously)
Related
I'm using dir-pagination found here.
This utilizes bootstrap styling. I can change the rest of the styles for the pagination controls, but I can't force the hover effect to have no color.
I can ensure that it has a color, by specifying one, but if I try to override it in a way that will force it to not have a color such as transparent, it defaults to the white color. My specificity is exactly the same as in the bootstrap css... but even if I remove the style in the bootstrap css is still defaults to white.
Been researching this for hours.
EDIT: See the following plunkr for an example of my problem.
http://plnkr.co/edit/2OvXNgX81NspuO9g356J?p=preview
twilliams Hi there.
Is this what you are trying to do?
Add this to your css.
.pagination li a:hover {
background-color: rgba(255,128,128,.5);
}
This will change the pagination background transparent color when each one is hovered.
Have a look at this Plunker.
I just realized my mistake and I feel foolish. I was making the assumption I had another element below with the color I wanted, and I was simply changing the color of an overlay element.
Turns out I didn't have that other element below, and so it really was just pulling the white of the monitor. I was a little clouded by the complexity of my current project that I didn't see it like I did with the simplicity of the plunkr example I made.
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
In css you may normally set both a background-image, and a background-color, and the image will be rendered on top of the color.
#someDiv
{
background-image: url(arrow.png);
background-color: blue;
}
This will cause #someDiv to have a blue background with the arrow.png image above.
However, what if I want to use firefox's -moz-linear-gradient to do a gradient for the background, then is there a way to make the image render over this gradient?
EDIT:
The MDC states that gradients replace the background-image tag. So in that case, I guess a follow up question is is it possible to specify two background images and have them render one on top of another?
This example on the Mozilla site has background gradients under background images:
https://developer.mozilla.org/en/css/multiple_backgrounds
I have often seen stylesheets written where you have something like this:
#anyelement {
background:transparent url(../img/filename.png) no-repeat left top;
}
The value in question is the "transparent" value - what is the benefit of using this value? I have never really used it with my own css files and my PNG images still seem to work fine in all browsers that support PNGs.
Can anybody shed some light on the use of this value??
Thanks!
If you're inheriting a background color from another declaration then that should clear it out.
Unless I’m missing something, using transparent in a background rule doesn’t have any effect.
When you use the background shorthand property, it always sets values for background-color, background-image, background-position and background-repeat. Any values you leave out of the rule will be set to their default values, which for background-color is transparent anyway.
See http://jsfiddle.net/CN2aJ/2/
Some people might prefer their CSS to be more explicit, and thus include transparent in there for clarity. But I don’t think it’ll ever affect how the page is displayed.
The transparent value in this example is the background color (or lack thereof).
The first part of the background attribute is the background color. This is the color that is shown if the background image is not found. Transparent just means that it shouldn't show a background color. Transparent is also the default btw.