在html / css中的并发背景色内开始新的背景色
[英]starting a new background color within a concurrent background color in html / css
问题描述
我正在该网页上工作，我想开始使用新的背景色（爱因斯坦出现的位置，并且由于图像是橙色的，因此我也想将背景的这一部分设置为橙色）
我不知道您是否已有背景色，是否可以更改背景色？ 有人有主意吗？
.fill-screen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; } .make-it-fit { max-width: 99%; max-height: 99%; } body { background-color: #EDF2EC; } fieldset { margin-top: 1em; margin-bottom: 1em; padding: .5em; } legend { color: blue; font-weight: bold; font-size: 85%; margin-bottom: .5em; } label { float: left; width: 90px; } input, select { margin-left: 1em; margin-right: 1em; margin-bottom: .5em; } input { width: 14em; } input[type="radio"], input[type="checkbox"] { width: 1em; padding-left: 0; margin-right: 0.5em; } a { text-decoration: none } @font-face { font-family: 'Poppins', sans-serif; font-family: 'Josefin Slab', serif; } /*other scripts*/ .enter:hover { background-color: lightblue; } .back:hover { background-color: lavenderblush; } .next:hover { background-color: lavenderblush; } .socials { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .socials:hover img { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ }
<!--bakhriddinov--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Save The Bees</title> <script type="text/javascript" src="Index.js"></script> <link href="Index.css" rel="stylesheet" type="text/css" /> <!--font--> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"> </head> <body style="background-color:#ffffff;"> <div class='fill-screen' style = "overflow: auto; max-height: 100vh;"> <img class = 'make-it-fit'src='tree.jpg' height="200"> <br> <br> <img class = 'make-it-fit'src='einstein_cycling.gif' height="200"> <br> <br> <a href ="Index.html"> <font size="4" face="Josefin Slab" color="4f6479" class="back"> BACK </font> </a> <a href ="page3.html"> <font size="4" face="Josefin Slab" color="4f6479" class="next"> <i> NEXT </i> </font> </a> <br> <br> </div> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2017-04-05 16:08:18
您始终可以将每个图像包装在自己的元素中，然后为这些元素分配background-color 。
.top { background: #09c; } .bottom { background: green; } img { display: block; margin: auto; }
<div> <div class="top"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div> <div class="bottom"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div> </div>
或者，如果您想在单个背景下更改颜色，则可以使用渐变。
div { background: linear-gradient(to bottom, #09c 0%, #09c 50%, green 50%); } img { display: block; margin: auto; }
<div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div>
解决方案2
0 2017-04-05 16:10:24
如果您想在图像本身中制作橙色背景，我相信您不能使用CSS做到这一点。 但是，您可以在此处做两件事。 首先是将其带入Photoshop，并使用魔术棒工具选择白色背景并使其透明。 由于它是.PNG，因此将其保存下来时将支持透明性。 其次是在图像本身上设置背景渐变，但这不会影响图像的内部，只会影响外部。
这是您要使用Photoshop方法的示例。 http://imgur.com/a/UbEjF
解决方案3
0 2017-04-05 16:32:19
如果您知道顶部元素占据的高度，则可以使用带有色标的渐变来实现您想要的效果。 例如：
body{ background:linear-gradient(180deg,#fff 100px,#ff0 100px); height:100vh; margin:0; }
更改以“#”开头的行的 css 属性，如颜色和背景<pre></pre>
[英]Change css properties, like color and background, for lines starting with “#” within <pre>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.