有HTML代码可以使我的背景图片透明,我的文字不透明吗? [英] Is there an HTML code that can make my background picture transparent and my text non-transparent?

查看:296
本文介绍了有HTML代码可以使我的背景图片透明,我的文字不透明吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好的,我一直在为我的教育专业需要满足的一个技术课程输入一些HTML代码。这是我的背景:

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

现在,我想让我的背景透明或褪色,以便我可以看到文字和我拥有的其他图像。背景太丰富多彩,无法看到单词而不必眯眼。有没有可以为我做这个的HTML代码?我不是这个职业的专家,我刚刚一直跟随我的教授告诉我做的所有事情,如果你有答案,请用宝贝步骤解释一些东西。非常感谢!

解决方案

选项1:使用褪色背景,以便您使用的文字或图像可读。

选项2:您的身体标记具有图像和div与类bgopc将在白色和减少不透明度的顶部...所以你的图像将变得透明。现在具有id容器的其他div将充当您的图像和内容的容器。

 < body> 
< div class =bgopc>& nbsp;< / div>
< div id = container>在此容器中添加您的文本和图片< / div>
< / body>

现在CSS将会是

  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}

我希望它能解决您的问题。


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!

解决方案

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.

这篇关于有HTML代码可以使我的背景图片透明,我的文字不透明吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆