【HTML/CSS】背景顏色圖片
阿新 • • 發佈：2022-02-07
這東西就像ps的圖層，有些東西背景層是不能動的
通過增加的圖層就可以解決問題。
背景的設定
相關屬性
-
background-colorrgb -
background-imageurl，輸入圖片的地址 -
background-position可用：center top bottom left right // px值 -
background-repeatrepeat或者no-repeat，是否通過平鋪來填滿整個背景空間 -
background-attachment背景是否可以滾動？fixed 固定 scroll 可以滾動 -
background-size用這個設定背景大小 可以是精確大小 也可以是百分比 可用cover contain
點選檢視-示例程式-程式碼
<!DOCTYPE html> <html> <head> <style> p { width: 30%; background-image: url(https://picsum.photos/id/1043/1920/604); background-size: contain; /* 用這個設定背景大小 可以是精確大小 也可以是百分比 用contain cover等預設可以用 cover 強行拉伸 contain 保證全部顯示，但是可能有空餘 */ font-size: 100px; opacity: 0.5;/*透明度 注意 用這個的話 其中的字也會半透明*/ } body {/*body相當於圖層的底層*/ background-color: darkblue; background-image: url(https://picsum.photos/id/1043/1920/1080); background-position: center top;/*可用：center top bottom left right // px值*/ background-repeat: no-repeat; background-attachment: scroll;/*fixed 固定 scroll 可以滾動*/ } </style> </head> <body> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> <p>123123123</p> </body> </html>