亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS:將背景色設置為窗口寬度的50%

CSS:將背景色設置為窗口寬度的50%

幕布斯6054654 2019-11-25 14:26:08
試圖在“分成兩部分”的頁面上獲得背景;相對兩側的兩種顏色(似乎是通過background-color在body標簽上設置默認值,然后將另一種顏色應用到div可拉伸整個窗口寬度的來完成的)。我確實提出了一個解決方案,但不幸的是,該background-size屬性在IE7 / 8中不起作用,這對于該項目是必不可少的-body { background: #fff; }#wrapper {    background: url(1px.png) repeat-y;    background-size: 50% auto;    width: 100%;}由于它只是純色,也許有一種只使用常規background-color屬性的方法嗎?
查看完整描述

3 回答

?
手掌心

TA貢獻1942條經驗 獲得超3個贊

實現“一分為二”背景的簡單解決方案:


background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

您也可以將度數用作方向


background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);


查看完整回答
反對 回復 2019-11-25
?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

因此,這是一個非常古老的問題,已經有了公認的答案,但是我相信,如果四年前發布該答案,那就會選擇它。


我用CSS完全解決了這個問題,沒有其他DOM元素!這意味著這兩種顏色純粹是一種元素的背景色,而不是兩種背景色。


我使用了漸變,因為我將顏色停止點設置得非常緊密,所以看起來好像顏色是鮮明的并且不會混合。


這是本機語法中的漸變:


background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

顏色#74ABDD從開始,0%現在仍然#74ABDD在49.9%。


然后,我強迫漸變移至0.2%元素高度內的下一個顏色,從而在這兩種顏色之間創建了一條非常實心的線條。


結果如下:

http://img1.sycdn.imooc.com//5ddb74250001564402530040.jpg

查看完整回答
反對 回復 2019-11-25
  • 3 回答
  • 0 關注
  • 1037 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號