在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.