How to fix background Opacity css
Tags: jquery,html,css
Problem :
It is possible to implement the opacity only to the background and not to the text ?
Demo: http://jsfiddle.net/4Zbsd/
.box
{
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
color: #fff;
height: auto;
width: 232px;
margin: 5px 0px 0px 20px;
padding: 1px 0px 1px 15px;
border-radius: 15px;
border: solid 1px #000;
}
Solution :
Here you are - http://jsfiddle.net/4Zbsd/7/
On the background property use rgba color - "background: rgba(0, 0, 0, .7);"
.box
{
background: rgba(0, 0, 0, .7);
color: #fff;
height: auto;
width: 232px;
margin: 5px 0px 0px 20px;
padding: 1px 0px 1px 15px;
border-radius: 15px;
border: solid 1px #000;
}
CSS Howto..
That is because setting height: 100% simply means "stretch to the height of element's content". And since it is an empty <div> element, a height of 100% simply computes to...
Change the text shadow on #post a (And remove duplicate definitions) e.g. #post a { color: #FFF; text-shadow: 1px 1px 2px #333; font-size: 20px; } Demo: http://jsfiddle.net/4u4T7/5/...
You are doing two different things there. Your JavaScript is actually assigning the class "someclass" to your body element, while your CSS is styling a body element with the class...
you can define css properites within the element to be able to display your div properly e.g. <div style="margin:0;border:1px solid red;"> Or additionally you can supply your css styles with...
No need to use an image here, it's easier, faster, more scalable and flexible to use a pseudo element like ::before here: .my-paragraph-style { background: #EABB27; padding: 20px 20px 20px...
You can apply: color: gray; // or any suitable color code, e.g. #808080 to one of the existing classes thumbs up icon large if suitable, or add a new class...
You should create your custom asset bundle file. For example: /frontend/module/admin/assets/AdminAsset.php Then define your css file in the $css array of your admin asset bundle: public $css = ['css/admin.css'];...
The trick with CSS here is that you are displaying the whole image, but it's translated, and clipped by its parent, either by setting it as a background or as...
You can use the below code for both focus and focusout this._textarea.focus(function(){ $(this).css('background-image','linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')}); this._textarea.focusout(function(){...
You'll need to be more specific (quick guide to CSS specificity), for instance, using the > selector: body { background-image: none !important; background: black !important; } html > body {...
As an example, using jQuery it can be done with: $("#popup").fadeIn(500, function() { $(this).delay(10000).fadeOut(500) }); DEMO: http://jsfiddle.net/Q8xMk/...
Remove display property as a start. Since you can't animate height to auto with css3, I would suggest you to go with the max-height hack: .top-navigation { max-height:102px; overflow:hidden; transition:0.2s...
Of course you can, the clip property let you use percentage values and it works since css2. Reference Some examples: http://www.html5rocks.com/en/tutorials/masking/adobe/...
You can't do this in a textarea. Any text-related property will affect the whole text within the the textarea. Following way you can change the color of text dynamically for...
The z-index property is only being applied on positioned elements. Adding position: relative; to the paragraph tag will correctly apply it. Look at this page for a full reference of...
HI now you can try to this css .first{float:left;width:200px; height:200px; overflow:hidden; position:relative; border:solid 1px red;} .pic{ background:url('https://www.gravatar.com/avatar/ce057f24ff1111404b60d1ad2d77571c?s=32&d=identicon&r=PG&f=1') no-repeat 0 0;background-size:100% 100%; width:200px;...
Have a look at the msdn : http://msdn.microsoft.com/en-us/library/ms366731.aspx <asp:menu id="NavigationMenu2" staticdisplaylevels="3" orientation="Vertical" target="_blank" runat="server" CssClass="menu2"> <levelsubmenustyles> <asp:submenustyle CssClass="level1" /> <asp:submenustyle...
I got it by using: <div style="position: relative; font-size: 100pt; height: 100px;"> <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height:...
can't use both classes and id's because I would have to create a unique CSS style for each one Not so. You just write rule-sets which have class selectors...
$( "#dialog-message" ).dialog({ width: 500 }); This should set your specific width upon initialization. The jQuery UI API reference has all of the available options for this widget http://api.jqueryui.com/dialog/...
You should be able to confirm a text requires scrolling if you use "scrollWidth > clientWidth " of the container - assuming it has overflow:hidden and you take margin, padding...
It should be ul.menu not .menu ul ul.menu { display:inline-block; margin:0px; padding:0; /* this might also help */ } Here's an extended version with load of fixes: html, body{ width:100%;...
Preloading: A sprite sheet is just an image, so preload like you would any other image. That said, a "jQuery way" would be: var $mySprite = $("<img>").attr("src", "myURL"); (Source: Preload...
If someone suggests, don't #upper a {display:none !important;} as this introduce more issues in the future than it would sove immediately. #upper a {display:none;} would work unless there is a...
I think I have a solution for you, if i understand your question correctly. Here's the live example on jsFiddle. I added two classes, one that's applied to the overall...
I would place a div around the images and place the height of the divs to 25%. HTML <div class="header"> <div class="headercontent"> <div class="socialbuttonstop"> <div class="social_btn"> <img src="Images/facebooksmall.png"/> </div> <div...
I'm not sure if its still the case but whenever I tried using numbers for classes it never worked unless there was a letter first. Either way numbers aren't very...
Do you need like this ? <html> <head> <style> #container { height: 400px; width: 400px; position: relative; } #image { position: absolute; left: 0; top: 0; } #point { cursor:...
I would suggest making it the background-image of your element with background-size: cover; and background-position: center center;. It will work with any image and will always be centered and filled....
You should have your table already written in the DOM with appropriate ids for each "spot" you want to put data. Then from your ajax call, just populate the ids:...