css之背景圖片和插入圖片的區別以及精靈圖的使用

阿新 • • 發佈：2018-12-25

一，背景圖片和插入圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-css背景圖片和插入圖片的區別.html</title>
    <style>
        div{
            width: 200px;
            height:200px;
            background-color: red;
        }
        .box1{
            background-image 
: url("images/image.png");
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>
</head>
<body>

<!--
    1,背景圖片和插入圖片的區別?
    (1),背景圖片僅僅是一個裝飾,你不會佔用位置,插入圖片會佔用位置
    (2),背景圖片有定位屬性,很方便的控制圖片的位置,插入圖片沒有定位屬性
    (3),插入圖片的語義比背景圖片的語義要強,所以在企業開發中你的圖片如果從想讓搜尋引擎收錄,那麼推薦使用插入圖片
--> 

<div class="box1">我是一個文字</div>
<div class="box2">
    <img src="images/image.png" alt="">
    我是文字
</div>
</body>
</html>

二，精靈圖片的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>42-css精靈圖.html</title 
>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-image: url("images/bg.jpg");
            background-position: -422px -190px;
        }
    </style>
</head>
<body>
<!--
    1,什麼是css的精靈圖?
    是一種影象的合成技術，說白了，就是在一張集成了好多張圖片的大圖片上根據background-position顯示要顯示的圖片
    2,css精靈圖的作用?
    可以減少請求的次數,降低伺服器的壓力
    3,如何使用css精靈圖?
    css精靈圖需要配合背景的圖片和背景定位
-->
<div class="box1"></div>
</body>
</html>

css之背景圖片和插入圖片的區別以及精靈圖的使用

一，背景圖片和插入圖片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-css背景

面試題之final,finally和finalize的區別以及如果catch裡面有return語句，請問finally裡面的程式碼還會執行嗎?

/* * 面試題： * 1:final,finally和finalize的區別 * final：最終的意思，可以修飾類，成員變數，成員方法 * 修飾類，類不能被繼承 * 修飾變數，變數是常量 * 修飾方法，方法不能

Hexo部落格搭建之在文章中插入圖片

在寫文章時，常常有配圖說明的需求。Hexo有多種圖片插入方式，可以將圖片存放在本地引用或者將圖片放在CDN上引用。本地引用絕對路徑當Hexo專案中只用到少量圖片時，可以將圖片統一放在source/images資料夾中，通過markdown語法訪問它們。 ![](/ima

css之讓文字排在圖片的右邊的中心位置

效果截圖如下:html程式碼如下:<dl> <dt>領導、老師</dt> <dd><img src="images/tx1.jpg" width="100" height="100

【IOS學習】CoreText學習筆記（二）設定文字屬性和插入圖片

設定文字和圖片的方法：繪製文字的步驟是：設定NSAttributedString 或NSMutableAttributedString——> 通過attributedString 生成frameSetter ——> 生成CTFrame——>畫出來設定文字

css之讓文字排在圖片的右邊的中心位置...

效果截圖如下: html程式碼如下:<dl> <dt>領導、老師</dt> <dd><img src="images/tx1.jpg" width="100" heig

Oracle基礎之count(1)和count(*)的區別

oracle color 情報性能函數提升 wrapper row 以及　　在數據庫中Count(*)或者Count(1)或者Count([列])或許是最常用的聚合函數。很多人其實對這三者之間是區分不清的。本文會闡述這三者的作用，關系以及背後的原理。　我在

mysql之觸發器before和after的區別

mysql 訂單負數 values 完成 -1 class 大於 nbsp 我們先做個測試：接上篇日誌建的商品表g和訂單表o和觸發器假設：假設商品表有商品1，數量是10；我們往訂單表插入一條記錄： insert into o(gid,much) value

selenium - 截取頁面圖片和截取某個元素的圖

pri 測試當前頁 rom 頁面 fire 按鈕 cati top 1.截取頁面圖片並保存在測試過程中，是有必要截圖，特別是遇到錯誤的時候進行截圖。 # coding:utf-8 from time import sleep from PIL import Image

多線程之Tread類和Runnable的區別

int super 接口 ticket strong args 得出第一個中一一.run()方法和start()方法的區別在java中可有兩種方式實現多線程，一種是繼承Thread類，一種是實現Runnable接口；Thread類是在java.lang包中定義的。一

python編程之賦值和拷貝的區別概述及操作excel數據庫（圖）

may 格式 work val 原子註意更遠當我就是 python編程之賦值和拷貝的區別概述及操作excel數據庫（圖）一、賦值在Python中，對象的賦值就是簡單的對象引用，這點和C++不同，如下所示：a = [1,2,”hello”,[‘python’, ‘C+

簡單的PHP上傳圖片和刪除圖片示例程式碼

分享一例簡單的PHP上傳圖片和刪除圖片示例程式碼，很簡單，適合初學的朋友參考，用來研究php上傳圖片還是不錯的。 <?phpif (!empty($_FILES["img"]["name"])) { //提取檔案域內容名稱，並判斷$path=”uppic/”; //上傳路徑if(!file_exist

Glide 圓形圖片和圓角圖片的實現

一、背景前言在Android APP的設計中圓角和圓形圖片的設計是必須的，網上關於圓形和圓角圖片的實現方案也已經有很多，但是那都是人家的，因此在此總結一下，方便後續設計中的查閱，希望對需要幫助的你也有用。二、方案的實現 2.1 方案一使用RoundedBitmapDraw

面試題之——樂觀鎖和悲觀鎖區別

對於樂觀鎖和悲觀鎖的區別及應用，要牢記一句話：讀取頻繁使用樂觀鎖，寫入頻繁使用悲觀鎖本文轉自：https://blog.csdn.net/L_BestCoder/article/details/79298417 一、樂觀鎖(Optimistic Lock) 總是認為不會產生併發

Java多執行緒-併發之執行緒和程序的區別

執行緒和程序的區別答：程序是一個“執行中的程式”，是系統進行資源分配和排程的一個獨立單位執行緒是程序的一個實體，一個程序中擁有多個執行緒，執行緒之間共享地址空間和其他資源（所以通訊和同步等操作執行緒比程序更加容易）執行緒上下文的切換比程序上下文切換要快

在Java應用程式中將PDF轉換為圖片和將圖片轉換為PDF

這篇文章將介紹如何在Java應用程式中將PDF檔案轉換為圖片以及將圖片轉換為PDF檔案。使用元件： Free Spire.PDF for JAVA Free Spire.PDF for JAVA是一款完全免費的PDF Java元件，開發人員可以使用它在Java應用程式中進行建立PD

EditText新增圖片和顯示圖片

/** * @author 鄧孟鑫 * 對EditText 裡的img標籤替換出圖片 * @param context * @param editText */ private static void imgTagReplaceBitmap(Context

Banner輪播圖網路圖片和本地圖片

banner使用步驟 1—新增依賴 compile ‘com.youth.banner:banner:1.4.9’ //最新版本 2— 新增許可權 * * 3—添加布局 <com.youth.banner.Banner xmlns:app=“http://sch

javaWeb開發之攔截器和過濾器的區別

攔截器和過濾的關係圖攔截器和過濾器簡要區別 1、攔截器是基於java的反射機制的，而過濾器是基於函式回撥。2、攔截器不依賴與servlet容器，過濾器依賴與servlet容器。3、攔截器只能對action請求起作用，而過濾器則可以對幾乎所有的請求起作用。4、攔截器可以訪問action

java基本排序演算法之選擇排序和插入排序

一.選擇排序一種簡單直觀的排序演算法，特點是效率低，容易實現，速度較氣泡排序快。思想：遍歷，每一趟從待排序的序列裡取出一個最小的數排在排好序的序列裡面，剩下的重複上述步驟直到排完。比較簡單直接貼程式碼： public static void xuanze(int

css之背景圖片和插入圖片的區別以及精靈圖的使用

一，背景圖片和插入圖片

二，精靈圖片的使用

相關推薦