當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css-背景图片和渐变

發布時間：2024/9/27 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 css-背景图片和渐变小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景圖片

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 邊框 border 1px粗細 solid樣式 red顏色*/div{width: 1000px;height: 700px;border: 1px solid red;/*background-image 默認是全部平鋪的repeat-x x軸平鋪repeat-y y軸平鋪no-repeat 不平鋪，就一張圖片*/background-image: url("images/2.jpg");}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>

練習

.title{font-size: 28px; /* 字體大小 */font-weight: bold; /* 粗體 */text-indent: 1em; /* 首行縮進 */line-height: 35px; /* 行高 *//*background: red顏色 url圖片 220px 2px圖片放置位置 no-repeat平鋪方式 */background: red url("../images/down.png") 220px 2px no-repeat; } ul li{height: 30px; /* 行高 */list-style: none; /* 去掉圓點 */text-indent: 1em; /* 首行縮進 */background-image: url("../images/right.png");background-repeat: no-repeat;background-position: 185px 1px; }

漸變

https://www.grabient.com/ 漸變色網站

background-color: #4158D0; background-image: linear-gradient(301deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{background: linear-gradient(301deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}</style></head> <body> <p>哈哈哈哈 </p> <p>哈哈哈哈 </p> 哈哈哈哈</body> </html>

https://www.bilibili.com/video/BV1YJ411a7dy?p=13

總結

以上是生活随笔為你收集整理的css-背景图片和渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。