opacity

This question already has an answer here: CSS background-image-opacity? 10 answers I want know that "How can i change background image opacity without changing on div content?" I searched too much & I don't find a good answer to solve this issue! HTML <div class="div-1"> <h2>title</h2> <p>text</p></div> CSS .div{ position:relative; width:200px; height:200px; float:left; color:white; background:#7a8586 url('url') no-repeat local right; overflow:hidden; text-align: justify; font-family:arial; font-size:14px;} David Because all children of an element are affected by its CSS, you cannot simply set

I have a div #test with a 0 opacity background, I want to animate it until reach the opacity of 0.7. But .animate doesn't seem to work with the css rgba. My css is: #test { background-color: rgba(0, 0, 0, 0); } my html: <div id="test"> <p>Some text</p> <img src="http://davidrhysthomas.co.uk/img/dexter.png" /> </div> and my jQuery: $('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000); Here a jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/ thanks a lot for helping! First of all you need to set the property correctly $('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)'

Well, I have this question and I see that someone already asked something similar but this I don't understand yet. What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay full color. Some example code here: input#element{ width: 382px; height: 26px; border: 2px solid #FFF; border-radius: 3px; opacity: 0.8; } The result is that my input element has the opacity but even the border, Can someone tell me how to set the opacity just in the content but not the border? Thank's. Use rgba syntax both for color and background and

I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole screen) is having some opacity but when I try to have a div inside this one that one also gets some opacity even though I set it to none; Example HTML: <ProgressTemplate> <div class="updateProgressBox"> <div class="updateProgressMessage"> <p>Processing request..</p> </div> </div> </ProgressTemplate> And CSS: .updateProgressBox { top: 0px; height: 100%; background-color:Gray; opacity:0.7; filter:alpha

How do I make an image fade in qml? How do I achieve this effect? here I attach the image of how I want it to look A possible solution is to use OpacityMask with a LinearGradient as source import QtQuick 2.9 import QtQuick.Window 2.2 import QtGraphicalEffects 1.0 Window { visible: true width: 600 height: 600 title: qsTr("Hello World") Image { id: input source: "input.jpg" anchors.fill: parent OpacityMask { source: mask maskSource: input } LinearGradient { id: mask anchors.fill: parent gradient: Gradient { GradientStop { position: 0.2; color: "transparent"} GradientStop { position: 0.5; color:

I am making a website, and it allows users to change view options. I use jQuery to smooth animations for font changing. It fades the whole page out and back in again with the new fonts. The fade out animation is fine, but when it fades back in, there's no fade. It just pops up, no animation. The problematic jQuery is in http://xsznix.my3gb.com/options.php . The code I have so far is this: $('#font-classic').click(function(){ $(document.body).animate({opacity: '0%'},{duration: 1000, complete: function(){ // font changing code here $(document.body).animate({opacity: '100%'}, 1000); }}); }); Why

I have this simple CSS... div:before { content: "G'day"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } jsFiddle . The :before pseudo element has the correct opacity in Firefox 6. In IE8, the opacity is not applied. Typically , setting the opacity on the div works, but that isn't what I want. I tried adding display: block but it didn't help. Whilst I could workaround this, is there any trick to get IE8 to honour the opacity property on a :before (and :after for that matter) pseudo element? thirtydot I don't think it's possible. I had the same problem a while back, and I ended up

I need to set an HTML <img src=""/> object's opacity in JavaScript in all the browsers. In Firefox I do it with line: imageobject.style.MozOpacity=opacity/100; What is the proper javascript code to set the opacity of an element in different browsers? Dennis img.style.opacity = .5; //For real browsers; img.style.filter = "alpha(opacity=50)"; //For IE; You don't need to sniff the user agent, just set both values as browsers will ignore the irrelevant one. Eric Leschinski Set the Opacity of an element in Javascript: There are many ways to do this. Example 1 , set the elements style attribute