Non-transparent text inside the transparent div

Hello, I can't do my text remains 100% opaqe inside a div transparent. I use an example from this site: http://css-tricks.com/384-non-transparent-elements-inside-transparent-elements/. I tried a few different websites and they all explain to do likewise. However, I don't think it still works. The text becomes transparent with the background color of .bar but not the background image, so if you do not use a black background for .bar then the text will not look correct. Sorry if I'm still a little difficult... Here is my code:

< h2 class = "ontop" > Haha! I'm free of my transparent prison. < / h2 >

< div class = 'bar' > < / div >

and my css:

{H2. OnTop}

position: relative;

top: 4.7em;

}

.bar {}

height: 4;

padding-top: 2em;

Filter:alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

background: white;

border-top: 3px solid #ccc;

border-bottom: 3px solid #ccc;

top of the margin: 5.0em.

}

As you can see, the only property that I changed is in this context on .bar from black to white, and now the text is transparent to this color, so it seems white. I saw people saying that they have applied a background with a solid color square with a 50% opacity or something similar, however I find tutorials on how to do it. They are all just explained how to change the transparent canvas. I even tried to adjust the opacity of a solid white square in fireworks at 50% opacity, and it does not, either. Any help would be appreciated, thanks!

Use a background transparent semi-image.png rather than opacity.

http://ALT-Web.com/sample.html

The problem with opacity, is that it delivers this purpose to anything you put inside this container.

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

http://Twitter.com/ALTWEB

Tags: Dreamweaver

Similar Questions

  • Text inside the ellipse is aligned differently in up and down

    See below. I have drawn an ellipse and tried typing the text inside. In half less, it aligns very well (fillings on the perimeter). But in the half, there is a bit of filling, for example the second row of Z might fit a bit more. Even the first line (which has only 3 Z) is half of the width of the last row (with 6 Z). Is it possible that I can configure it to behave better?

    The horizontal justification of the text inside the circle is now much "denser" more down the circle you will. This can be seen in the examples of 3rd and 4th post 13 above, as well as I tie here. The spacing between the words in the first couple rows is much larger that it is in the back rows.

    You can control the spacing between words and characters in your paragraph settings.
    As long as there are spaces between the words. In addition, several options for fully justified text.

    Do not judge what will happen to the 'world real text' using "ABCD" or "z z z z" strings only.
    (I suppose, you will use a different text in the oval).

    Here some screenshots that illustrate the behavior of the text based on the different parameters for the paragraphs, text blocks and even stories:

    Paragraph justification is fully justified, justification for the single word is set to the center line.

    With the text block selected a setting another story will influence the spacing a lot:

    Optical margin alignment value 14 pt.

    Different attack will make subtle changes:

    Options of text block where the first base offset is set to cap height will make a difference.

    If you have many options to adjust your text.

    Uwe

  • {module_cataloguelistdump} will not fit inside the sidebar div

    How do {module_cataloguelistdump}

    perfectly inside the sidebar div

    Module does not move to the left inside the div tag margin

    See html below - see screen capture below.

    <! --> SIDE bar

    < div class = "col-xs-12 col-sm-4 col-lg-3 pull to left sidebar" >

    <! - LIST CATEGORIES - >

    < div class = "section module-list-topics" >

    < h4 class = "section title" > categories < / h4 >

    {module_cataloguelistdump,-1, 1, _self, weight}

    < / div >

    <!-/-> LIST of CATEGORIES

    < / div >

    Screen Shot 2014-10-16 at 12.01.49 PM.png

    Hey there,

    Discovers the CSS on this issue and view the HTML on it. Before, it's pretty simple if you inspect the markup and then change the CSS accordingly.

    With the names of catalog if your space isn't big enough for them so most of them will instantly be on two lines, no matter what you do. Therefore consider that as well.

  • Hyperlink text inside the Muse

    Hello

    I have a question about the hyperlinks on the text inside the Muse.

    When I create a text and a hyperlink on it, it automatically adapt the settings to default hyperlinks, which is ok.  I know that I can change the style and make it different, but it is possible to say that you do not want to apply any template at all to a link?

    I was able to do this in another creator of Web sites, but I can't find a similar function within the Muse.

    Thank you.

    Ulf

    Hey Ulf

    Saying "don't want to apply the style to all the" you mean, the link should work but should show any style with the action of the mouse?

    Have you tried with edit link styles:http://screencasts.worldsecuresystems.com/Sanju/Site_Properties_2014-09-15_13.46.59.png

    Thank you

    Sanjit

  • Possible to change the contents of text inside the group frame?

    Hello world

    I'm newbibe to Indesign forums.

    I had grouped image placed on the rectangle frame and the text. now I need change content text frame using indesign Javascript

    Possible to change the content of text inside the group frame... ?

    -yajiv

    Hello

    Try the following lines.

    main();
    
    function main() {
    
        if  (app.documents.length != 0  &&  app.selection.length == 2 ) {
            if( app.selection[0].constructor.name == "Group" && app.selection[1].constructor.name == "Group" ) {
                var sel1 = app.selection[0];
                var graphics1 = sel1.allGraphics[0].itemLink;
                var text1 = sel1.textFrames[0].contents;
    
                var sel2 = app.selection[1];
                var graphics2 = sel2.allGraphics[0].itemLink;
                var text2 = sel2.textFrames[0].contents;
    
                sel1.textFrames[0].contents = text2;
                sel2.textFrames[0].contents = text1;
    
                var fP1 = File( graphics1.filePath );
                var fP2 = File( graphics2.filePath );
    
                graphics1.relink( fP2 );
                graphics2.relink( fP1 );
            } // if
            else {
                alert ( "Select 2 groups!" );
            } // else
        } // if
        else {
            alert ( "Wrong selection!" );
        } // else
    } // main
    

    Although it might work for you, it is probably not advisable, because if you apply other content on the chassis, you modify the content, but not the formatting. Even with the restoration of the links of the images.

    So a better solution may be, separate frames, move them and group them back.

  • Targeting the area of dynamic text inside the moviecip to the variable

    Hello

    How we don't target a dynamic text box to change the color of the border within a clip? Example below is not working

    theName = ("answerPrint" + arryCount);
    boxName = ("box" (arryCount + 1));

    _root.pagePrintPartA [theName] [boxName]. Border = true;
    _root.pagePrintPartA [theName] [boxName]. BorderColor = 0x00cc66;

    Thanks for the backup, but I should of stated what was that that:

    theName = ("answerPrint" + arryCount) ;// Variable name within the area of dynamic text inside MovieClip
    boxName = ("box" + (arryCount + 1)) ;// Instance name of real dynamic text box inside MovieClip
    _root.pagePrintPartA [theName] [boxName]. Border = true;
    _root.pagePrintPartA [theName] [boxName]. BorderColor = 0xFF0000;

    In certifying this script you showed me where I went wron (do not see the forest for the trees). The last two lines should be:

    _root.pagePrintPartA [boxName]. Border = true;
    _root.pagePrintPartA [boxName]. BorderColor = 0xFF0000;

    I was aiming for back. Thank you very much DazFaz.

  • Align the text inside the text boxes

    Hello
    How can I align a text in the Center within a text input (I'm populating the input text until the page load with values). I tried with "text-align: center" but it did not work.

    Thank you
    Rahul

    I tried and it works fine for me

    
    

    Make sure you apply it to the contentStyle.

  • input field for text inside the table tree adf

    Hello

    I want to know, how to create a field of text within the tree adf table entry.

    I have three table tree of hierarchical level, places-> Services-> employees.

    This function I want as editable email field.

    can someone tell me please how to do this?

    Thanks in advance,
    SAN

    Hello.

    Drag table tree and try this code in your jspx

    
                        
                            
                                
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
    
  • Show dynamic text inside the title for several images on mouseover

    I have 25 animated Clips dragged on the stage and they have for instance similar names for easier manipulation purposes within programming using loops. The instance names look like this: image0, image1, image2 and so on.

    Whenever I'm mouseover on one of these unique images, I want to show the unique title of this image using all securities as a dynamic text named imageTitle container.

    I managed to do this job image by image, but that would require me to copy paste and modify the following code for each image.

    image0.onRollOver = function() { 
        imageTitle.text = "First image title";
        imageTitle.textColor = 0x000000; // setting the text color here
      };



    image0.onRollOut = function() { 
        imageTitle.text = "Choose an image";
        imageTitle.textColor = 0x000000;
    }; 

    Question: The above code wouldn't work, but seems redundant to me. Since I was the name of similar instances (image0, image1,..., image24), how can I put this code inside a loop or something to work for all the images without repeating this code 25 times.

    Update: I've added a table for the project that contains all titles:

    var imagesTitles = new Array("First image title", "Second image title", .... );  

    :

    imageTitle.textColor = 0 x 000000;

    for (var i: Number = 0; i<>

    This ["image" + i] .ivar = i;  key stage

    {This ["image" + i] .onRollOver = Function ()}

    imageTitle.text = imagesTitles [this.ivar];  milestone used here

    }

    {This ["image" + i] .onRollOut = Function ()}

    imageTitle.text = "" Choose image ";"

    }
    }

  • get the TextInput text inside the different function?

    It's all in a single class

    method 1:

    var txtInpt:TextInput = new TextInput();txtInpt.width = 250;searchInpt.text = "Text";txtInpt.addEventListener(MouseEvent.CLICK, clearSearch);txtInpt.addEventListener(KeyboardEvent.KEY_DOWN, onKeyBoardEvent);MyContainer.addChild(searchInpt);
    

    method 1 creates a lot of UI for a container

    method 2 - onKeyBoardEvent - check what was the key code:

    private function onKeyBoardEvent(e:KeyboardEvent):void {
        if (e.keyCode == Keyboard.ENTER) {
    
        stage.focus = null;
    
    // here is where i would trace the text info
    
        }
    
    }
    

    Since the entry of search is created in method 1, method 2 does not have access to this

    How can I have access to the text entered in the txtInpt in my second method?

    Thank you!

    Hey dtater,

    to access the textinput object, use this:

    trace(e.currentTarget.text);
    

    You should get what you want. Good luck!

  • Change the color of the text inside the .swc library

    Hello

    I'm trying to Flash Builder 4.5 and got library external .swc (made with Flash and Flex components Kit) with some objects. One of these objects is a text field with the text. I need to change the color of this text and I don't know if it's possible. I tried to change the 'color' property, but it does not change the color. I tried "setStyle ('color', 0xff000)", but it returns an error.

    Is there another way to change the color of the text .swc of Flex/Flash Builder?

    Ask the DFL used to create the swc, so you can inspect.

  • The tables and the text inside the MC

    var cards: Array = ["asso", "tre", "re", "donna", "jack", "sette", "sei", "cinque", "quattro", "due"]

    var map: Array = ["Asso", "Tre", "Re", "Donna", "Jack", "Sette", "Sei", "Cinque", "Quattro", "Due"]

    for (ft var = 0; IP < = Carte.indexOf (event.currentTarget.name); ft ++) {}

    carteChiamate [ft] = card [ft]

    Map [ft]. CARDS [ft] .setTextFormat (TEXT_FORMAT);

    }

    There is something wrong with card [ft] .cards [ft] .setTextFormat (text_format), the rest of the code is ok...

    Each object must have its own media.  Try:

    This [map [ft]] [[ft] CARDS] .setTextFormat (TEXT_FORMAT);

  • update of text inside the field

    I can update the specific part of the field for example, the foo column contains an entry: 'Hello Wworld' and I want to update just Wworld leaving the rest of the data. I used the very simple example, but in my case the data contains 3900 characters

    Thank you and best regards

    Hello

    Pawan has already suggested, you can use REPLACE function to achieve. Try this for example

    Select REPLACE (' ' about 43.7 million tonnes ', 'million', 'billion') of the double

  • Pages is not track changes inside the text boxes?

    I try to use Pages, industry changes, but it seems to be limited to body text. If I include images deleted, or if I change the text inside the text boxes, no changes are followed. What is a limit? (Version 5.6.1 of pages)

    See this thread for an answer from VikingOSX, the short answer for the current Version is no.

    Pages ' 09 fact.

    Track changes in text boxes

    You could always suggest via Contact us Apple to add this feature in the news

    http://www.Apple.com/feedback/pages.html

  • Center the text inside a Label component

    How can I Center text inside the element Label AS3?

    PD: Don't Center not the component Label but centering the text inside the label cmponent.

    Thank you

    Edwin

    Try...

    var myTF:TextFormat = new TextFormat();
    myTF.align = TextFormatAlign.CENTER;

    labelName.setStyle ("textFormat", myTF); substitute the labelName according to needs

Maybe you are looking for

  • AirPrint is not my officejet pro 8600

    AirPrint is not my officejet pro 8600

  • Work of the drivers for the sound, wifi, or Apple (with the numpad) keyboard for Windows 10 partition?

    I have a new iMac 21 "with El Capitan installed. I created a partition Windows 10 but in the case of Windows, I can only get sound through headphones (it seems by default helmet optional). Also I can't use WIFI, but I connected LAN and work. Finally,

  • How to configure basic authentication

    Hi all If you'd be grateful if someone can help me explaining how can we define basic authentication on demand HTTP for Blackberry 10 waterfalls.

  • Updated between the values

    HelloCould someone help me with a very trivial problem.I have after the update clause, but it gives the error ORA-01427. Seems that it is between the two problem. How should I change what he begins to work?Update sales_inthe value of sale = (select a

  • updated and meta-data description

    Muse of love!I greeted my mobile and desktop using Business Catalyst version.A week later (on my desktop), I realized I need to update my properties on each page... descriptions and metadata.I made the changes, updates in Business Catalyst, then save