Is there an HTML code that can make my background picture transparent and my text non-transparent?

问题

Okay so I've been typing some HTML code for a technology class that I need to satisfy for my Education major. This is what i have for my background:

body {
    background-image:url('islandbeach.jpg');
    background-repeat:repeat;
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
}

Now, I want to make my background transparent or faded so I can see the text and the other image that I have. The background is too colorful to be able to see the words without having to squint. Are there any HTML codes that can do this for me? I am not a pro at this stuff, I've just been following everything my professor has told me to do so please explain stuff in baby steps if you do have an answer. Thank you so so much!

回答1:

Here is a simple hack you can do using the :after property.

Css Code

        body:after {
            content: "";
            background-image:url('http://www.w3schools.com/css/klematis.jpg');
            background-repeat:repeat;
            background-position:center;
            background-attachment:fixed;
            background-size:cover;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }

js bin demo http://jsbin.com/welcome/50098/

回答2:

Try this

.bg {
    width:280px;
    height:100px;
    position:relative;
    display:block;
}

.bg:after {
    background: url(https://www.google.co.in/images/srpr/logo3w.png);
    opacity: .5;
    width:280px;
    height:100px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content: "";
}

here is jsfiddle File

回答3:

Option1: Use faded background so that the text you will write or images that you use will be readble.

Option2: Your Body tag have image and div with class bgopc will be on top of that with white color and reduced opacity... so your image will become transparent. Now other div with id container will act as container for your images and content.

<body>
   <div class="bgopc">&nbsp;</div>
   <div id=container>Add your Text and Images inside this container </div>
</body>

Now CSS will be

body {background-image:url('islandbeach.jpg');background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:cover;}
.bgopc{max-height:100%;background:#fff;position:absolute;top:0;left:0;width:100%;
height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:1}
#container{z-index:2;position:relative}

I hope it will solve your problem.

来源：https://stackoverflow.com/questions/13427774/is-there-an-html-code-that-can-make-my-background-picture-transparent-and-my-tex

标签

html

css

background-image