1. 程式人生 > >div中新增背景圖片及居中顯示

div中新增背景圖片及居中顯示

1、div元素的居中需要設定對應的寬度及左邊邊界的寬度,

margin後的引數可以是兩個或者四個,兩個時指的是上下、左右邊界的寬度,四個時指的是上、右、下,左的邊界寬度;

2、使用background-image將圖片新增為背景;

3、使用background-repeat控制圖片的拉伸模式。

<div style="width:100%;top:300px;">
    <div style="width: 80%; margin: 0 10%; background-image: url('../../Content/picture.png'); background-repeat: round">
        <p style="width:80%;margin:0 10% 0 10%;font-size:17px;color:black;font-family:YouYuan;line-height:200%">
            <br />
            這是第一行文字<br />
            這是第二行文字<br />
            這是第三行文字<br />
            這是第四行文字<br />
        </p>
    </div>
</div>



相關推薦

div新增背景圖片居中顯示

1、div元素的居中需要設定對應的寬度及左邊邊界的寬度, margin後的引數可以是兩個或者四個,兩個時指的是上下、左右邊界的寬度,四個時指的是上、右、下,左的邊界寬度; 2、使用background-image將圖片新增為背景; 3、使用background-repeat

Android studio2.0在app設定背景圖片新增圖片資源

我還處於摸索階段,也是在慢慢倒騰,持續更新,希望能幫助到有需要的人 首先將需要的圖片轉成png格式(png格式的圖片顏色過渡平滑且支援透明度),牆紙或啟動畫面的圖片資源儲存為jpg格式。 將圖片儲存到相應的工程之下,不要放錯了。 某工程/app/src/m

4、Swing在JPanel新增背景圖片方法

1 package com.tntxia.commonswing.panel; 2 3 import java.awt.*; 4 import javax.swing.JPanel; 5 6 /** 7 * 有背景圖片的Panel類 8 * @author t

div設定背景圖片(不設定div高度和寬度)

css: body{margin:0px;font-size:18px;} #container{position:absolute;background-image:url(images/2.jpg);background-repeat:no-repeat;width:1

Swing-JFrame 淺談如何在JFrame新增背景色背景圖片

JFrame預設是BorderLayout JPanel預設是FlowLayout。 1.JFrame設定背景色,注意體會註釋的那句話。 package com.tools; import java.awt.Color; import javax.swing.J

java 新增背景圖片(可根據視窗大小自動調整顯示圖片

主題:新增背景圖片 有時候想給背景新增圖片,可是隻顯示了圖片的一部分,是不是很納悶啊!那就看看下面的程式吧!   java程式碼 import java.awt.*; import javax.swing.*; public class Samp extends JF

Vue2.0使用less給元素新增背景圖片出現的問題

在使用less在Vue.js中給元素新增背景圖片時 或者你會出現這樣的寫法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者

“display:block-inline形式的Span或Div新增文字後,導致Span或Div排版掉落、錯位”的原因解決方法

在開始用display:inline-block的時候,只知道有baseline這麼一說,而且當時記筆記解決了空隙問題,百度一堆文章,什麼終極解決辦法等等,還記錄了一些問題,當時不明白,到今天才明白verticle-align的用法,原來可以這麼用,以後可以隨便玩inli

PyQt4給QWidget新增背景圖片或者更換背景色

class Emit(QtGui.QWidget):     def __init__(self, parent=None):         QtGui.QWidget.__init__(self, parent)         self.setGeometry(300, 300, 200, 100)  

div的內容-圖片img垂直居中的五種方法

一、行高(line-height)法 如果要垂直居中的只有一行或幾個文字,那它的製作最為簡單,只要讓文字的行高和容器的高度相同即可,比如: p { height:30px; line-heigh

android在程式碼為佈局新增背景圖片

mainLayout = (LinearLayout)findViewById(R.id.main_layout); mainLayout.setBackgroundResource(R.drawabl

VC為SDI新增背景圖片總結

方案一,使用畫刷改變檢視單調的背景     1 我們為CTestView類新增一個變數 CBrush m_brushBackground;這個畫刷就是用於畫背景的。 2 我們在CTestView的建構函式中加入如下程式碼: //方案一.1,直接用資源id CBitmap

Cocos2d-x優化關於背景圖片優化

指針 text .cpp 互動出版網 沒有 tde white 實現 origin 因為背景圖片長時間在場景中保存,並且圖片非常多,我們能夠對其進行一些優化。我們通過例如以下幾個方面考慮優化:1、不要Alpha通道背景圖片的特點是不須要透明的,所以紋理格式能夠採用不帶有A

固定容器裏圖片上下左右居中顯示學習

borde 屬性 屬性。 alt tex 網上 blog 代碼 solid 最近做個小項目,要做圖片的上下左右居中。從網上找了找,看了些css代碼。自己寫寫,學習一下! 1、左右居中的話,比較簡單。父元素a,子元素b。 a裏面加(text-align:center),b裏面

div自適應瀏覽器窗口居中顯示

col style comm 適應 http img relative 水平 mar 讓div自適應瀏覽器窗口居中顯示 轉載自:http://www.cnblogs.com/qiye2016/p/5492983.html 今天做 banner 時發現一個問題,就是

HTML使背景圖片自適應瀏覽器大小

pub 拉伸 htm char html back 圖片 title tran 1、圖片不夠大,又background屬性不能拉伸圖片; 2、只能用個div,把其z-index值設為負,並使這個div大小為整個body大小,在div裏用<img> 3、b

如何讓高度自適應的div的文字水平垂直居中

weight pos overflow 最大 高度 absolut abs 自己 left 1.在做數據展示的時候,因為後臺沒有數據,為了提示用戶沒有數據,自己手寫了一個div中間顯示一個“暫無數據的字樣”, 然後控制顯示和隱藏,這樣方法有兩種: 第一種:設置display

在jsp程式碼新增背景圖片

為了把註冊頁面的背景做的好看一些,可以新增背景圖片 第一步 把圖片新增到webroot資料夾裡面 然後在myeclipse的webroot會看到這張圖片www.jpg 第二步 在<body>裡面新增    background="www

Java Swing新增背景圖片

程式碼: import javax.swing.*; public class SetTheBackground { public static void main(String args[]) { //插入圖片 ImageIcon icon1=n

安卓新增背景圖片時解決圖片拉伸問題

問題描述: 當我們在android layout佈局檔案設定背景圖片只需要加上 android:background="@drawable/ic_bg"  就可以了設定ic_bg為背景的圖片了 然而這樣設定後當圖片較小時會發現 圖片被拉伸了,失真。     解決方法