HTML連載80-多重背景圖片及其練習

来源:https://www.cnblogs.com/ruigege0000/archive/2020/04/05/12635460.html

一、多重背景圖片 1.background:url() 重覆類型 位置信息,url() 重覆類型 位置信息; 中間使用英文逗號隔開 2.第二種方法就是分開寫 background-image:url(),url(); background-repeat:重覆類型,重覆類型; background-p ...


一、多重背景圖片

1.background:url() 重覆類型 位置信息,url() 重覆類型 位置信息;

中間使用英文逗號隔開

2.第二種方法就是分開寫

background-image:url(),url();

background-repeat:重覆類型,重覆類型;

background-positon:位置信息,​位置信息;

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D192_MoreBackgroundImage</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 1000px;

            height: 1000px;

            border:1px solid black;

            margin:0 auto;

            background:url("image/play_tennis.jpg") no-repeat left top, url("image/baidu_logo.png") no-repeat right top;

            /*註意點:多張背景圖片之間使用逗號隔開,先添加的背景圖片會蓋住後添加的背景圖片*/

            /*另外一種方法*/

            background-image: url("image/play_tennis2.jpg"),url("image/baidu_logo.png");

            background-repeat: no-repeat,no-repeat;

            background-position: left bottom,right bottom;

        }

</style>

</head>

<body>

<div></div>

</body>

</html>

 

 

 

 

二、練習

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D193_ExerciseOfMoreImage</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 700px;

            height: 450px;

            border:1px solid black;

            margin:100px auto;

            background-image: url("image/sun.png"),url("image/blueSky.png");

            /*background-size:*/

            background-repeat: no-repeat ,no-repeat;

            background-position: 20px 20px,0 0;

            animation:move 2s linear 0s infinite normal;

        }

        @keyframes move {

            from{

                background-position: 20px 80px,0 0;

            }

            to{

                background-position: 80px 20px,-200px 0;

            }

​

        }

</style>

</head>

<body>

<div></div>

</body>

</html>

 

三、源碼:

D192_MoreBackgroundImage.html

D193_ExerciseOfMoreImage.html

地址:l

https://github.com/ruigege66/HTML_learning/blob/master/D192_MoreBackgroundImage.html

https://github.com/ruigege66/HTML_learning/blob/master/D193_ExerciseOfMoreImage.html

2.CSDN:https://blog.csdn.net/weixin_44630050

3.博客園:https://www.cnblogs.com/ruigege0000/

4.歡迎關註微信公眾號:傅里葉變換,個人賬號,僅用於技術交流,後臺回覆“禮包”獲取Java大數據學習視頻禮包

 

 


您的分享是我們最大的動力!

更多相關文章
  • Redis是一個開源的、基於記憶體的數據結構存儲器,可以用作資料庫、緩存和消息中間件 Redis最常用的功能 緩存 分散式鎖 ...
  • 創建3台虛擬機 主機為桌面版 其他為迷你版本 ******************************常用命令、進程名稱****************************啟動集群命令: start-all.sh啟動zookeeper: zkServer.sh start 啟動journal ...
  • 統計一個表的數據量是經常遇到的需求,但是不同的表設計及不同的寫法,統計性能差別會有較大的差異,下麵就簡單通過實驗進行測試(大家測試的時候註意緩存的情況,否則影響測試結果)。 1、 準備工作 為了後續測試工作的進行,先準備幾張用於測試的表及數據,為了使測試數據具有參考意義,建議測試表的數據量大一點,以 ...
  • 簡介 Flutter Fly是什麼?Flutter Fly是一款開源的Flutter 項目,非常適合初學者進行學習。App內集成了160+Flutter基礎控制項的詳細介紹及用法,內容來源於: "http://laomengit.com/" 。 歡迎頁: 首頁、控制項頁面、詳情頁及搜索頁面: 我: Ap ...
  • 質數是指在大於1的自然數中,除了1和它自身外沒有其他因數的自然數。 一、標記法,flag初始值為true,當n%i 0時(1<i<n),說明n不是質數,此時flag值為false且迴圈終止;當n%i != 0 時,flag的值始終為true,此時會輸出n是質數。 <!DOCTYPE html> <h ...
  • 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit ...
  • Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構建並開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js,並詳細介紹使用vue-cli腳手架工具快速的創建Vue項目,以及對項目目錄結構的解釋說明,使大家清晰的瞭解Vue項目的開發流程。 ...
  • 作者 | Function | 前端時空 Vue 和 React 中的 key 到底有什麼用? key 是給每一個 vnode 的唯一 id,依靠 key,我們的 diff 操作可以更準確、更快速。 對於簡單列表頁渲染來說 diff 節點也更快,但會產生一些隱藏的副作用,比如可能不會產生過渡效果,或 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...