Is there an HTML code that can make my background

2019-07-17 00:06发布

站内问答 / HTML/CSS
1770 3 5

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!

3条回答
ゆ 、 Hurt°
2楼-- · 2019-07-17 00:37

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

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-07-17 00:54

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.

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2019-07-17 00:59

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)