•  \n \n<\/div> \n<\/body><\/pre>

    關(guān)鍵代碼:<\/p>

    POSITION: relative; WIDTH: xpx; BACKGROUND: url(image) x1px y1px; FLOAT: left; HEIGHT: ypx;<\/pre>

    POSITION屬性說明:relative--相對定位WIDTH--圖片顯示的寬度image --背景圖片(這里是圖片的地址)x1px--圖片水平位置偏移量,起點為(0,0),如取負值將向反方向偏移y1px---圖片豎直位置偏移量FLOAT--圖片浮動方向,如left,rightHEIGHT--圖片顯示的高度<\/p>

    現(xiàn)在我們將在上面的位置為參照物顯示圖片不同區(qū)域。1.1、只顯示圖片中的“W‘<\/p>

    如圖(2):<\/p>

    \"css中使用一張圖片顯示多個背景\"<\/p>

    圖示顯示部分WIDTH: 75px,HEIGHT: 60px,圖片水平向左偏移3px.代碼:<\/p>

    .bg .logo { \n      \n    POSITION: relative; WIDTH: 75px; BACKGROUND: url(.\/logo.gif) -3px 0px; FLOAT: left; HEIGHT: 60px; \n      \n}<\/pre>

    1.2、只顯示圖片中的一個“B“,如圖(3)<\/p>

    \"css中使用一張圖片顯示多個背景\"圖示顯示部分WIDTH: 38px,HEIGHT: 60px,圖片水平向左偏移78px,豎直向下偏120px,代碼:<\/p>

    .bg .logo { \n    POSITION: relative; WIDTH: 38px; BACKGROUND: url(.\/logo.gif) -78px 120px; FLOAT: left; HEIGHT: 60px \n}<\/pre>


    <\/p>\n


    <\/p>"}

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    Home php教程 PHP開發(fā) css中使用一張圖片顯示多個背景

    css中使用一張圖片顯示多個背景

    Jun 07, 2016 pm 05:23 PM
    height nbsp position px width

    ? ? ?不知你有沒有經(jīng)歷過,看到網(wǎng)頁上的一些漂亮的圖標(biāo),如列表圖標(biāo),于是把它下載,打開一看,竟然不是我們下載的單個圖標(biāo),而是一張大圖,上面集合著許多小圖標(biāo)!
    這里便使用了CSS中一張圖片顯示多個背景的方法
    這些小圖標(biāo)為什么不是分別存儲成單獨的圖標(biāo),而是集合放在一張圖片上?這樣做的目的就是減少http請求次數(shù),節(jié)省時間和帶寬。
    強烈推薦使用這種方法!
    當(dāng)然,實現(xiàn)的方法是有多種,下面將通過一個例子來說一下我常使用的方法。
    1、顯示完整的圖片

    如圖(1)

    css中使用一張圖片顯示多個背景

    代碼:

    <style type="text/css">  
    <!--  
    .bg{ 
    WIDTH: 181px; 
    HEIGHT: 61px; 
    } 
    .bg .logo { 
    POSITION: relative; WIDTH: 181px; BACKGROUND: url(./logo.gif) 0px 0px; FLOAT: left; HEIGHT: 60px; 
    } 
    } 
    --> 
    </style>  
    <body> 
    <div class="bg"> 
    <div class="logo"></div> 
    </body>

    關(guān)鍵代碼:

    POSITION: relative; WIDTH: xpx; BACKGROUND: url(image) x1px y1px; FLOAT: left; HEIGHT: ypx;

    POSITION屬性說明:
    relative--相對定位
    WIDTH--圖片顯示的寬度
    image --背景圖片(這里是圖片的地址)
    x1px--圖片水平位置偏移量,起點為(0,0),如取負值將向反方向偏移
    y1px---圖片豎直位置偏移量
    FLOAT--圖片浮動方向,如left,right
    HEIGHT--圖片顯示的高度

    現(xiàn)在我們將在上面的位置為參照物顯示圖片不同區(qū)域。
    1.1、只顯示圖片中的“W‘

    如圖(2):

    css中使用一張圖片顯示多個背景

    圖示顯示部分WIDTH: 75px,HEIGHT: 60px,圖片水平向左偏移3px.代碼:

    .bg .logo { 
          
        POSITION: relative; WIDTH: 75px; BACKGROUND: url(./logo.gif) -3px 0px; FLOAT: left; HEIGHT: 60px; 
          
    }

    1.2、只顯示圖片中的一個“B“,如圖(3)

    css中使用一張圖片顯示多個背景
    圖示顯示部分WIDTH: 38px,HEIGHT: 60px,圖片水平向左偏移78px,豎直向下偏120px,代碼:

    .bg .logo { 
        POSITION: relative; WIDTH: 38px; BACKGROUND: url(./logo.gif) -78px 120px; FLOAT: left; HEIGHT: 60px 
    }



    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Solution: Your organization requires you to change your PIN Solution: Your organization requires you to change your PIN Oct 04, 2023 pm 05:45 PM

    The message "Your organization has asked you to change your PIN" will appear on the login screen. This happens when the PIN expiration limit is reached on a computer using organization-based account settings, where they have control over personal devices. However, if you set up Windows using a personal account, the error message should ideally not appear. Although this is not always the case. Most users who encounter errors report using their personal accounts. Why does my organization ask me to change my PIN on Windows 11? It's possible that your account is associated with an organization, and your primary approach should be to verify this. Contacting your domain administrator can help! Additionally, misconfigured local policy settings or incorrect registry keys can cause errors. Right now

    How to adjust window border settings on Windows 11: Change color and size How to adjust window border settings on Windows 11: Change color and size Sep 22, 2023 am 11:37 AM

    Windows 11 brings fresh and elegant design to the forefront; the modern interface allows you to personalize and change the finest details, such as window borders. In this guide, we'll discuss step-by-step instructions to help you create an environment that reflects your style in the Windows operating system. How to change window border settings? Press + to open the Settings app. WindowsI go to Personalization and click Color Settings. Color Change Window Borders Settings Window 11" Width="643" Height="500" > Find the Show accent color on title bar and window borders option, and toggle the switch next to it. To display accent colors on the Start menu and taskbar To display the theme color on the Start menu and taskbar, turn on Show theme on the Start menu and taskbar

    How to change title bar color on Windows 11? How to change title bar color on Windows 11? Sep 14, 2023 pm 03:33 PM

    By default, the title bar color on Windows 11 depends on the dark/light theme you choose. However, you can change it to any color you want. In this guide, we'll discuss step-by-step instructions for three ways to change it and personalize your desktop experience to make it visually appealing. Is it possible to change the title bar color of active and inactive windows? Yes, you can change the title bar color of active windows using the Settings app, or you can change the title bar color of inactive windows using Registry Editor. To learn these steps, go to the next section. How to change title bar color in Windows 11? 1. Using the Settings app press + to open the settings window. WindowsI go to "Personalization" and then

    How to enable or disable taskbar thumbnail previews on Windows 11 How to enable or disable taskbar thumbnail previews on Windows 11 Sep 15, 2023 pm 03:57 PM

    Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another disadvantage is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. However, if your hardware specs can handle it and you like the preview, you can enable it. How to enable taskbar thumbnail preview in Windows 11? 1. Using the Settings app tap the key and click Settings. Windows click System and select About. Click Advanced system settings. Navigate to the Advanced tab and select Settings under Performance. Select "Visual Effects"

    OOBELANGUAGE Error Problems in Windows 11/10 Repair OOBELANGUAGE Error Problems in Windows 11/10 Repair Jul 16, 2023 pm 03:29 PM

    Do you see "A problem occurred" along with the "OOBELANGUAGE" statement on the Windows Installer page? The installation of Windows sometimes stops due to such errors. OOBE means out-of-the-box experience. As the error message indicates, this is an issue related to OOBE language selection. There is nothing to worry about, you can solve this problem with nifty registry editing from the OOBE screen itself. Quick Fix – 1. Click the “Retry” button at the bottom of the OOBE app. This will continue the process without further hiccups. 2. Use the power button to force shut down the system. After the system restarts, OOBE should continue. 3. Disconnect the system from the Internet. Complete all aspects of OOBE in offline mode

    Display scaling guide on Windows 11 Display scaling guide on Windows 11 Sep 19, 2023 pm 06:45 PM

    We all have different preferences when it comes to display scaling on Windows 11. Some people like big icons, some like small icons. However, we all agree that having the right scaling is important. Poor font scaling or over-scaling of images can be a real productivity killer when working, so you need to know how to customize it to get the most out of your system's capabilities. Advantages of Custom Zoom: This is a useful feature for people who have difficulty reading text on the screen. It helps you see more on the screen at one time. You can create custom extension profiles that apply only to certain monitors and applications. Can help improve the performance of low-end hardware. It gives you more control over what's on your screen. How to use Windows 11

    10 Ways to Adjust Brightness on Windows 11 10 Ways to Adjust Brightness on Windows 11 Dec 18, 2023 pm 02:21 PM

    Screen brightness is an integral part of using modern computing devices, especially when you look at the screen for long periods of time. It helps you reduce eye strain, improve legibility, and view content easily and efficiently. However, depending on your settings, it can sometimes be difficult to manage brightness, especially on Windows 11 with the new UI changes. If you're having trouble adjusting brightness, here are all the ways to manage brightness on Windows 11. How to Change Brightness on Windows 11 [10 Ways Explained] Single monitor users can use the following methods to adjust brightness on Windows 11. This includes desktop systems using a single monitor as well as laptops. let's start. Method 1: Use the Action Center The Action Center is accessible

    How to Fix Activation Error Code 0xc004f069 in Windows Server How to Fix Activation Error Code 0xc004f069 in Windows Server Jul 22, 2023 am 09:49 AM

    The activation process on Windows sometimes takes a sudden turn to display an error message containing this error code 0xc004f069. Although the activation process is online, some older systems running Windows Server may experience this issue. Go through these initial checks, and if they don't help you activate your system, jump to the main solution to resolve the issue. Workaround – close the error message and activation window. Then restart the computer. Retry the Windows activation process from scratch again. Fix 1 – Activate from Terminal Activate Windows Server Edition system from cmd terminal. Stage – 1 Check Windows Server Version You have to check which type of W you are using

    See all articles