在html / css中的并发背景色内开始新的背景色
[英]starting a new background color within a concurrent background color in html / css
问题描述
I was working on this web page and I was wanting to start a new background color (where Einstein appears, and since the image is orange I want to also make that part of the background orange) 
我正在该网页上工作，我想开始使用新的背景色（爱因斯坦出现的位置，并且由于图像是橙色的，因此我也想将背景的这一部分设置为橙色）
I don't know if you can change a background color while you already have a background color?? 我不知道您是否已有背景色，是否可以更改背景色？ anyone have an idea? 有人有主意吗？
.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
You can always just wrap each image in it's own element and assign a background-color to those elements. 您始终可以将每个图像包装在自己的元素中，然后为这些元素分配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>
Or you can use a gradient if you want to change colors with a single background. 或者，如果您想在单个背景下更改颜色，则可以使用渐变。
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
If you want to make a orange background within the image itself I don't believe you can do that with CSS. 如果您想在图像本身中制作橙色背景，我相信您不能使用CSS做到这一点。 However, you can do two things here. 但是，您可以在此处做两件事。 First is bringing it into Photoshop and using the magic wand tool to select the white background and make it transparent. 首先是将其带入Photoshop，并使用魔术棒工具选择白色背景并使其透明。 Since it's a .PNG, it'll support transparency when you save it down. 由于它是.PNG，因此将其保存下来时将支持透明性。 Second is setting a background gradient on the image itself but that won't affect the interior of the image it'll only affect the outside. 其次是在图像本身上设置背景渐变，但这不会影响图像的内部，只会影响外部。
Here is the example of what you want using the Photoshop method. 这是您要使用Photoshop方法的示例。 http://imgur.com/a/UbEjF http://imgur.com/a/UbEjF
解决方案3
0 2017-04-05 16:32:19
If you know the height occupied by the top element, you could use a gradient with colour-stops to achieve what you wan. 如果您知道顶部元素占据的高度，则可以使用带有色标的渐变来实现您想要的效果。 For example: 例如：
body{ background:linear-gradient(180deg,#fff 100px,#ff0 100px); height:100vh; margin:0; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.