掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 419|回复: 9

[求助] 請賜教: html 在 image 的標簽如何劃格線

[复制链接]
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2020-5-7 22:25:06 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2020-5-8 00:26 编辑 ! F) h3 `% |2 p0 C
    % w! y+ ]. y& q% g3 n. [
    懇請各位先進蒞臨指導,一個問題搞了一夜,搞不出來,html 在 image 的標簽, 若想把此 image 劃上格線左5格右5格等分的大小該如何處理,實在是找不到解決辦法
    * N: U; R; ?# j" j1 ?0 z6 I, ?+ ?1. 格線可貼附在 image 上.....或許可用層的概念 z-index* Q8 X" `3 ^/ a! d" E  L; H
    2. 目前碰到定位問題.....且弄成 mdx 格線沒顯示....非常不解....
      F6 C) @. Q4 d4 w6 e; p4 Z' t3. 目前 格線的部份和  圖片竟是分離的......兩者並非一體.....也就是放大縮小時格線會隨之放大縮小
    ! t+ M: l# a! }3 p    不知可有辦法可以完全貼附格線和圖片一起放大縮小
    % ?$ p" N  X7 v$ a4 }! e4. img {position: absolute;  left: 0px; top: 0px; z-index: -1;}.....image 用 absolute 定位似乎也行不通...此會和之前的導航和翻頁有衝突.....
    $ ~" a, P% K. k% H* f- ]8 X, Z& ?   且如此定位....圖似乎如同 background image ....也無法擺於導航和翻頁之間
    $ D$ k9 J, Y; j7 Z' S+ Q   附圖如下......另一張為無導航和翻頁的 html 格線的顯示7 K8 k' P! O* ]$ ]% f4 @
    5. 令人更不解的是 為何 寬度可以用 百分比的比例但高度卻用不了百分比的比例 width: 50%; height: 500px;
    ) s$ {: O9 ~0 `' ~$ ~   高度若用 百分比的比例.....width: 50%; height: 20%; ...... 顯示根本是錯誤的% ~7 T/ ~# ]* D' Y6 G9 }
    9 y6 S( ]' O  n. P) u$ Y( Z

    ) {) y4 @. h/ T' @& f% l! D7 y, K% X  {% S/ i/ [& a: [
    % v/ m* B9 u( a! Z( Z( q* R
    Thanks a lot; g$ D+ Z+ e7 l8 a% j

    7 ?( \; o$ b6 Y+ [0 C
    # j( d0 S& P) ]https://c-t.work/s/fbe2adefc2e146 或进入 cowtransfer.com 获取,在首页输入取件码:4wagja(24小时内有效)
    ; i& W6 z. W( S5 G0 O% k! p1 P7 d6 D( ^0 W0 s9 T# p
    / y6 Z6 i6 H" }) E* y7 W( Q6 f7 O

    % z7 \: H$ Y5 ?6 d; {* L7 i
    $ {$ {2 Z+ ]- X: a9 i% }) U<html>
    , c: U+ g4 h5 }<head>9 r0 Q% N, Q( K; A: V4 z
    <style># E5 q% F. Z# A, X, E
    table, td {
    6 K% t; H! i# o; E6 e1 L6 }  border: 1px solid blue;" X; e8 Z) W& A
      border-collapse: collapse;. M1 z1 o8 q0 U3 F
      color:red;# j2 k! {0 `+ ~6 J6 Y
      width: 50%;/ U* O- D  c2 B" x3 W' F
      height: 500px;% l9 g% G5 x5 H# Q
      z-index: 1;
    * \+ A3 z$ @. r5 g, G- m/ y  text-align: right;
    $ }0 s  t( e  K, Y5 v* ?}  X* H: }3 Y' Z5 {% x5 L% S4 H; \
    img {position: absolute;/ M! h8 }3 t, j; S, X" A' d
      left: 0px;0 C9 _, Z: y. r1 i# E
      top: 0px;
    ! j, N$ Q' Q. H  z-index: -1;( G5 d) V( F3 W7 q8 z7 W
    }8 c0 G$ r. R6 ?* a1 C- S
    </style>
      y; a7 O) l$ u, r9 m1 j! X</head>
    ) d4 ]6 v. `+ b8 p. R* T<body>
    8 d& |' |3 K0 y- y3 l<table style="width:100%">
    % }* t. q# X: e( s4 c) Q2 F  <tr>5 s6 v% c4 O7 L$ _; j! f6 w
        <td>1</td>
    8 R, D2 g) `. E. I2 j7 q    <td></td>
    ; Z! U! p  m) M6 C+ B4 {  </tr>
    # H; P6 y& s7 h9 U; g) i, J  <tr>
    . f1 i- k' y9 |  H# L    <td>2</td>
    " q* e# E! s) o  Z! `8 k    <td></td>
    & J4 T# g; \$ H7 T! J4 i    </tr>
    + T$ V5 s" ^) a    <tr>
    1 Z3 L/ @2 R& @1 _. O/ N) U% `    <td>3</td>
    4 ]6 n3 K3 u! d7 t; t0 j4 l# m5 s    <td></td>( K, I' f. H' N0 X) k1 k
        </tr>
    5 }. ]: A- X$ L, }2 `4 ~; R- Y      <tr>
    4 L' N1 K/ j/ ^$ @+ |' y4 l- z1 {6 |    <td>4</td>! R! K9 n0 S- x0 E
        <td></td>
    1 H8 {& @- A% j$ l$ u4 w    </tr>
    : m/ H- z: c0 L8 j4 v- w! J( n5 S      <tr>
    / [8 q; i' J: a& ?0 P& k( ^2 I    <td>5</td>
    , f3 _. M: D- d+ H" S6 ^    <td></td>
      u7 F) D' f! }% r, ~* i4 Z9 z    </tr>  2 |, X) E, c- S9 ?2 V+ [
    </table>2 F& G5 J3 N  v$ |
    <img src="C:\cpdic\css\OECD_25.png" width="100%"></img>% b9 `; F, m8 P; N8 \) F7 |% L
    </body>
    - A" W; s2 u! E4 D) A</html>
    ( y$ w( b) e: D) N! |6 }. H! w* \; \4 R1 ]
    $ w  _7 K2 o- j4 m2 B* s

    2 a- B5 ^5 c* ^) V" T& K" @9 Y6 N
    : E$ J) e$ j3 B8 e. a; v' `8 b+ o9 G( J# a. Z

    ( `! B; l6 Y! v1 a2 `5 P+ P- F$ {5 P  M
    5 W9 x) h6 v, i) |3 T5 W
    $ d" k  }3 W) V0 V- g
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 670 天

    [LV.9]以坛为家II

    发表于 2020-5-8 12:57:43 | 显示全部楼层
    我不是这方面的专业,只不过用过下CSS,所以下面答案可能有错,只作参考和提示,我把table以实际大小而不是相对的百分比来设定,图片放到大table处作背景,这样图片就可随table格线一同放大缩小,不过这样画面会偏于一隅,但可用margin调整, 不知是否合意。5 c- n% T; a1 k# |6 o9 |3 _
    ; Q/ n, n' M$ n, [0 }
    ===========================' a, p9 O: _" n3 ^7 T1 ^2 @) f
    0 T$ c! C5 B6 R* f: ?
    <html>: q9 j, p1 o5 Z$ ]
    <head>/ _1 Z% {4 E1 ^" e  s1 W( x& t
    <style>+ t6 Y" _* w" ^: y1 D/ T
    table {( e+ S; T* ?% j4 r5 |: W+ F
            background-image:url("file:///D:/OECD_25.png");
    ) V1 y  q3 L/ U8 j) w* N2 }) I) j        margin: 500px% [3 W4 ?2 k4 {+ j, E. U$ y
    }; E9 w) l6 i* y# e& c! h7 w' N" I
    table, td {
    / H$ W: j7 {" i/ b/ l7 d2 \        border: 1px solid blue;
    ) o+ G3 @7 C/ `        border-collapse: collapse;
    0 s! @* f7 I# ?# J8 j' @$ {" E        color:red;
    " G! K* M7 x, r& `        width: 1663px;
    - N( z% u; K. u        height: 494px;
    ! o0 D1 k7 ]; a) M, e( v4 U        text-align: right;  d1 |; Q0 H5 {7 L) ^, X
    }* |5 a( a/ m9 b+ v
    </style>
    , s) G( V4 A7 E</head>
    ) V+ }1 J6 W1 a' F5 a* G2 c0 t<body>: A' W% m! N2 p/ s1 O5 t
    <table>
    + u& F7 |- E6 D. |' Z: v7 ]) B        <tr>* D9 c- R7 Q0 j" q& l
                    <td>1</td>
    3 n: }0 Q* N2 N. X, M. O  ?                <td></td> , \7 O, \! ^/ ]# J
            </tr>; f$ t1 V9 E5 r$ G! Q1 x/ P
            <tr>
    1 E8 z, Y' g( I. L' L8 ^                <td>2</td># Q& ^" ~) \8 h" C
                    <td></td>( q0 u; Z5 f, _9 V+ }8 z; {/ [
        </tr># L! t/ J6 `) K, O7 p4 ~
        <tr>% O" p# r9 G' W
                    <td>3</td>; A, Q  ?0 F  i
                    <td></td>
    & d9 z5 y# S  o    </tr>4 _9 x" X, w3 L6 N5 t9 a
        <tr>
    3 h# W9 S1 f1 X: L) K                <td>4</td>& L4 u/ x. P, m0 Q
                    <td></td>. k' ^3 m, c& T6 x0 F  \& p
        </tr>
    9 v, p4 [1 D, c. G    <tr>- u  ~6 h$ n; @, S
                    <td>5</td>
    1 J6 N0 l  R2 N                <td></td>
    ( K% u7 x% L: m9 x- `2 Y1 s    </tr>
    % l0 e; h3 O  c& f</table>
    ! o. w" o) ~& m' z</body>
    3 w7 G: |9 r( C& x4 F4 E</html>
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 670 天

    [LV.9]以坛为家II

    发表于 2020-5-8 13:11:10 | 显示全部楼层
    另外,表格大小按比例设置比图片更小,在大格加上        background-size: 100% 100% 一行,画面缩小时就可以缩至比原图片更小。
    6 U: w& {+ k' L% h( b% i# a5 h, N8 B' f5 ^1 l3 V( w* M
    ===============9 W$ N7 \0 w5 O* u

    / D2 K2 U/ @% X5 q3 I" P<html>( m8 q6 u/ O$ [! E! g( d
    <head>
    & C( `; h; }  l9 J, K<style>
    ' y3 @+ J' x. J1 qtable {
    8 a; d' [2 d- N4 O3 q0 H        background-image:url("file:///D:/OECD_25.png");& u& }9 m2 I; B: y3 m& `1 G. x/ F
            margin: 500px;
    ' V0 _! L: D+ U: g" }        background-size: 100% 100%;: _4 L/ p/ B5 x/ G0 q
    }0 U+ J4 N% j4 n" w7 W7 n# p
    table, td {% V. i: ^6 z$ u; z- g
            border: 1px solid blue;9 [* H* o1 N9 V4 S& T6 c, m/ `! ^
            border-collapse: collapse;; O: n1 X! Z3 q& v0 s
            color:red;! P3 ^- ^9 S# n2 O) k( w
            width: 832px;5 L1 w# N) ^5 N( G+ m5 ]; _
            height: 247px;1 {& D5 C) y5 X7 L* G
            text-align: right;
    - n6 |8 p8 Q. _+ H0 v* L: r7 N& ~9 G5 X}5 ^$ R% h  M$ M2 b: m
    </style> 6 Z3 X0 u5 F" B- h  _$ V

    % t4 Z! h8 f% h$ j: i......
    + b' F+ p5 l' |2 X; O# n/ s......
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-5-8 15:28:34 | 显示全部楼层
    abc163 发表于 2020-5-8 12:57
    4 a, S" B5 n' a( L" T# ^  V: @我不是这方面的专业,只不过用过下CSS,所以下面答案可能有错,只作参考和提示,我把table以实际大小而不是 ...
    4 r4 }) t6 x6 o, k7 u, b
    abc163 兄:, V: S( F& a, G( M: J) @- C
    哇....都沒試出來....
    . ^7 J5 ^3 {& `  C) [but, thanks anyway.
    . q; o2 A4 Z$ B4 ~6 A5 R
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 670 天

    [LV.9]以坛为家II

    发表于 2020-5-8 16:33:10 | 显示全部楼层
    你测试的结果如何?如何没试出来? 我用firefox,waterfox和IE浏览都可以的,图片的路径要加上file:///前缀,否则图片不显示,图片放到桌面上也无法显示,可能和我电脑权限有关
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-5-9 20:58:42 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-5-9 21:05 编辑
    # O& q4 I  x. G+ O- g$ [/ ?
    abc163 发表于 2020-5-8 16:33
    7 G4 K7 L& e# E9 j你测试的结果如何?如何没试出来? 我用firefox,waterfox和IE浏览都可以的,图片的路径要加上file:///前 ...

    8 b2 p+ D/ e: |9 ]2 l  q3 H% n
    ' y* K+ r! H2 gabc163 兄:
    1 F2 [( x7 U- ^- x! g, d不好意思剛剛才看到仁兄的回帖
    ; H. q0 V$ H6 w* e1 k; {  B
    % F0 ?  e& C0 ?" D4 Y; b7 N昨天試可能是我  url("file:///D:/OECD_25.png");少了一 /  , 這兩天再來試試# m2 [8 m2 @% {( I: ^2 Q
    試後結果再請益仁兄. y) T) o0 e- ]9 p+ Y* o* H9 _5 ^' g
    只是非常不解
    ' d& g$ E: v( I- z, L1. 百分比的比例但高度卻用不了百分比的比例 width: 50%; height: 500px;
    0 g/ U% w; K; _    高度若用 百分比的比例.....width: 50%; height: 20%; ...... 顯示根本是錯誤的
    & K( z, b$ A' T  S# d' f7 k$ D2. 若用 background-image:url("file:///D:/OECD_25.png"); 格線不是會被蓋掉嗎. b. G; h5 l) N1 i$ J
        或是圖片會蓋掉格線
    6 A9 Q+ u  R; m+ t2 f3. 仁兄可否把您所試的 html 上傳
    5 Z# D) y8 N8 ^7 \0 M
    7 p& m, x$ `5 j. V
    9 d) n; g% R" H" J, `1 a' ]" f" T4 ^Thanks a lot
    % L8 y# ]/ h* D( g7 k* u, X; j5 h2 e0 ~
    . F) |: p  A7 a3 G1 Y
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-5-9 21:25:32 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-5-10 00:58 编辑
    9 N) C& p0 S# w0 Q4 X
    abc163 发表于 2020-5-8 16:33
    + y  Q3 j8 ]3 y5 _3 Y; B你测试的结果如何?如何没试出来? 我用firefox,waterfox和IE浏览都可以的,图片的路径要加上file:///前 ...
    , G3 j  K2 [5 x6 V3 \4 ?
    & S. h" N1 F7 ~; ^8 }- _) A
    abc163 兄:4 G; j1 M9 E( x7 p
    圖出不來
    & ~3 N+ X' I9 L1 p9 V改了一堆路徑都一樣. s6 b; [: A: I$ a1 c+ i& W

    * k% d5 a; u/ Z; _9 J( N/ M
    / }9 U( p! [* U" n; |4 [. k' Q0 D- Y

    . ^* f0 b: ]+ J- z8 ~<html>
    - M( o: J* v2 |<head>4 R1 }0 r0 T- g0 B3 @6 u
    <style>. B; Q. D; G  m, q- {
    img {1 G* p% V  G& C- t
            background-image:url(file:///cpdic/css/OECD_25.png);
    ; \1 |& m5 Z3 L       }2 H3 u; t5 ^; D; c! B1 U( V% y1 T
    </style>
    - G# o& h/ }% ~. Y9 ~</head>
    . Y* i% W! ?# f</html>- N- h% x; L# R3 W& P$ F+ ]: O
    " ~4 k2 ^+ Y" A) O  K2 z" @* J- N
    5 p+ q( q, {; o
    5 k, U8 {8 o6 _5 A4 s1 k; N
    這個圖有出來....但是是background
    / W, ]4 @' \- k# S$ ^<html>* p4 r3 U5 l* @7 I& [5 v
    <head>
    + D2 p; J; V- o% X3 F- m5 j<style>
    * o' L% `7 Z8 E  {& X% q  H1 Qbody {: j& s& ~* B3 H; V- A& }
    background-image:url("file:///C:/cpdic/css/OECD_25.png");5 d8 F" V1 h$ [( c/ u" M8 Q- Q
           }7 |: c; h# }( a( C+ y9 p$ T; S
    </style>
    - [! M7 Q. U  }. P</head>
    ) Z+ P2 A8 |* u<body>/ t9 w6 {% |: ~. [; U& L
    </body>
    + _5 O" a& T+ N: {2 v" q+ A  ?</body>
    & |/ W- A' n2 j2 |6 ]* t</html>8 }$ l! q) O* Y" c) D. h

    * y! S4 v- r+ k" a, P/ ^1 ~$ e* @/ p
    第一個有搞出來
    . Z2 U! s& s0 e- m4 i
    ; D% Y1 }% `3 V: j# [* b
    - H: U) c/ K8 V2 s. t7 s( |<html>1 N/ w; w; o/ z: ?
    <head>) J4 r9 q* e4 V; H
    <style>' a8 k9 i( T0 f
    table {
    2 x; Y1 v- ^4 p: b! W        background-image:url("file:///C:/cpdic/css/OECD_25.png");
    ' d& S- v) E' Z        margin: max width;& y/ C, G- m! ?' N
           }* c9 `& u6 @2 s6 z3 j4 b& D
      0 p' J6 u5 X  h% I! q1 G
    table, td {0 \3 v  ?0 [( c4 t
            border: 1px solid blue;( f) k% v8 s5 G* T9 T6 y
            border-collapse: collapse;
    - I- v$ P: J) T. w        color:red;
    0 D- }* D, M8 V) X$ i* Z        width: 1663px;
    / B. x! z. @0 o( a! u9 l9 y- ~        height: 494px;;
    2 k+ h; Z' Y; Y0 E        text-align: right;
    ' L: \" v+ A8 i        % [5 z9 i- I! Y7 W" P, E
    }4 w$ p0 P" N7 n! T0 l. O( d" y1 Q4 T
    </style> 0 t/ u. ^2 I7 s) X0 Y5 n0 B) s
    </head>; ~% v) y0 [$ n% Z8 b
    <body>
    0 p/ D4 v0 q4 C. s' L7 x' W<table>
    + {% w/ L) `% d4 Q( }0 h  <tr>; D! r& q, P% M
        <td>1</td>+ \- @! C) }% V* m% X
        <td></td>
    ( l0 d- ~! a) a& W, w9 H8 c# k4 ?  </tr>0 \7 k0 ~5 ^: `
      <tr>
    ; ~% M  D* r/ \3 r$ S7 @; u5 \( U    <td>2</td>" H8 I0 F, n/ y/ Q, A' A; e$ {& j2 n
        <td></td>
    7 ^! D. ]% |5 ~- x% N    </tr>
    2 _) D% a7 h( G6 a0 N( D3 ?& r' e: d    <tr>
    . J/ S5 M+ \2 |/ I4 m    <td>3</td>
    % B; o/ p. z- W& y    <td></td>  G% |( G& u3 h# F# g
        </tr>
    0 s$ F( V9 c  v5 A) v      <tr>3 E3 {! L1 _/ H+ p+ L4 B
        <td>4</td>
    ) o% r- y3 J( P* d5 N3 u5 z    <td></td>( X! C; y3 ]& I  O/ i, u
        </tr>( G3 c$ M& x) t; u/ |9 ?5 x% h
          <tr>2 L. Y& D9 A$ C" B- V/ U
        <td>5</td>
    $ m+ R+ h/ _% M9 F    <td></td>* b- f/ {6 P  ]* ]+ E( @" f9 H- J
        </tr>  
    9 H8 }* _+ T; I+ \; D</table>. m; I0 _. y2 T
    , X% J) }; ~# }9 }- A0 @$ C# _8 L
    </body>
    / i. i4 V! P2 w0 r5 e</html>
    " A! \9 Q/ w( Q( \0 ^
    ! G2 N) M3 U2 ~1 L7 e7 }6 z
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 670 天

    [LV.9]以坛为家II

    发表于 2020-5-9 23:36:13 | 显示全部楼层
    我没专门学习网页设计,只是使用一些开源软件时积累的一些网页设置经验,要得到正确答案确实要查看网页设计语言的规则。对于百分比宽和实际高度的规定,我猜测可能是浏览器读取数据时有规定,估计网页的宽度有个限度,这样使用百分比就有个相对参照,但高度估计没有预设的限定,经验上也常遇见很多一个网页有很长篇幅的,可以放整部长篇小说的。如果没有限定,使用一个百分比那就出问题了。
    ! t( f+ [( a2 c, N1 w5 {* g* ?1 Z4 c9 x6 V( Z
    background-image是设定背景的,处于底层,网格线应覆盖在图片之上,你可以把另一图片放到一小格内就可以验证到了。我再试验你原来的设计,其实你图片放置也是可以的,只是问题出在表格设置参数没统一而已,可参考grids.html 文件。
    % r$ h$ d7 N$ i  m/ N! M  i3 n8 }
    6 O" W% J+ A# J. ^) t$ u; _% N附上两网页文件:grid.html 和 grids.html 。第一个文件使用background-image, 第二个稍改动原文件的表格设置。& {4 f- @# b# ]8 R! E1 A$ \4 }3 [
    链接:https://pan.baidu.com/s/1MIbERaux9GhblMayGyNAsg . ?- [5 s3 O/ ]) t
    提取码:qmm4
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-5-10 01:03:04 | 显示全部楼层
    abc163 发表于 2020-5-9 23:36
    / Z' H! {1 u; [  B8 N我没专门学习网页设计,只是使用一些开源软件时积累的一些网页设置经验,要得到正确答案确实要查看网页设计 ...

    4 |9 C( {( B3 v" M
    ( Y) z  ?! }$ Q$ b/ Z. `! DBrother abc163 :
    9 m- ]! m, T6 B4 G; I+ E嗯嗯....感謝指引....或許...jpg, ...png 本身有此限制存在...或許 svg 可解' H: t6 u9 x2 p4 v

    " F& k5 {: V' Q3 M' TThanks a lot
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2021-5-6 20:43:23 | 显示全部楼层
    本帖最后由 喬治兄 于 2021-5-6 20:50 编辑 % ^% t" r3 n$ C+ L
    ) z0 f' x( B& F8 B8 d
    暫時筆記,有待進一步9 v1 W( c( ~, c$ F+ N0 W; [" u
    ; E5 d" O; l% x  y0 K# W6 E

    4 U' J. U6 T, h$ }https://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854
    # A+ p- P( [; |) W' i$ R2 i
    8 M: a, k$ W. ]3 \! x! b( H! @/ V4 i0 _9 o- y
    <!DOCTYPE html>
    2 E' ?% S5 p; ]<html>
    " E% E' F  w, Y* z$ v1 R<head>0 \! |5 T) @5 P! V
    <style>9 X; n) A* o# o# p" Y( Y+ l# Y
    .container {
    - _( s9 u) e9 s' @8 m7 h  position: relative;
    & @% y* t  X0 H6 k  width: 50%;3 F9 N/ L9 F+ e
    }! L& I+ x9 Z9 f( `6 I

    $ b3 f7 J( N( ~1 J+ i  T# X.image {* @: Z5 Z- ]( Z/ k6 k! b+ {
      opacity: 1;  a  Z: R% d0 H5 z( b3 v
      display: block;
    - R% A3 w* `# ?2 L6 S* c( y* E  width: 100%;
    ; C% M# h: D' Z  height: auto;
    + n1 n! W) d# }$ T8 C4 Q  transition: .5s ease;, _% c5 m' Y& c" }3 W. r1 A3 V
      backface-visibility: hidden;
    % _( @& y1 h: F}
    ( K9 r2 l4 l! e; I, j. N0 a7 `5 v5 |% M; ?( k( H( X; j
    .middle {2 m$ }1 n' T' S2 M7 Z
      transition: .5s ease;
    3 A" a* o' E- l1 }% g6 n" \8 I  opacity: 0;8 J/ c; w) o8 X/ w3 f" `; A* R
      position: absolute;
    6 \2 d8 r! @. m  k% a, B  top: 50%;
    6 ]" v# _) m5 x1 u6 c" D/ `  left: 50%;5 e( Y1 `0 |# @
      transform: translate(-50%, -50%);
    & E9 r3 n4 Z5 c/ s  -ms-transform: translate(-50%, -50%)
    0 R7 i6 s- W/ i; b}: n; q4 C/ G: V6 V7 g: [
    7 k" ~& P: e. j5 [; B& s
    .container:hover .image {
    4 i; \& X( @3 c' x  opacity: 0.3;5 K2 E- r0 i. U
    }
    7 w# e6 @. m3 F, Z' \$ H4 X! @! L  F4 U, O& `
    .container:hover .middle {, u5 M0 [: ?' y3 }
      opacity: 1;
    " v3 [+ I# d9 |  r* a}
    5 c6 ?5 s# M0 [* L" G
    ; y" L* ~7 I( t.text {
    1 X8 n7 a. l. \+ `- h, u. Q' c# `  background-color: #4CAF50;9 H. i* ?( L2 l3 U, _- W
      color: white;
    + g2 }6 ~( R: W) m1 G3 r* n  font-size: 16px;) I# i% O" j3 i  Y
      padding: 16px 32px;8 E2 R1 ]+ `7 m, X8 C3 d' |4 ~
    }
    2 E& ?, o7 q2 q
    4 W$ |3 Y- e  V! v: E0 g3 Dtable, td {
    " {4 `% M& u4 z  border: 1px solid blue;
    $ G5 \( }( i4 z' P% |7 b  border-collapse: collapse;0 @) ]' k: i9 t, p8 g# I8 ]
      color:red;
    + Y1 S6 A8 ^3 R6 Q& W5 O! r  width: 50%;: v: {: w; m0 e# V* e
      height: 9.5vw;, f* J+ u; `: N; r
      z-index: 1;
    2 s+ [% s4 d6 k9 [3 n% {) P  text-align: right;, U4 r/ S9 Q6 ]
    }* H% O' ^7 _  g7 T- H! q: a
    img {position: absolute;
    ( ^7 B  ?' }/ L0 F; u7 n: ?5 Q  left: 0px;
    $ @2 U: J+ G/ K) Y* D8 k" x0 M6 N  top: 0px;
    , N8 V1 S. S6 B2 x: [5 w* i$ b  z-index: -1;) S6 c. v/ N; d# i& N( f. b
    }
    6 X/ S2 |9 X7 S( R& P
    4 A2 a  N( k0 M8 S, F( O' E8 x# T</style>
    * V, V  D, q8 J. F$ M3 S! p</head>$ L9 U( r7 ~9 Z1 M, }, R
    <body>% h  g- c" F# E  j3 y5 w# ?/ W; E5 p
    7 |1 b' g& Y$ d# U
    <h2>Fade in a Box</h2>& p5 ^9 H. U- z) ]# y8 H* O
    , \+ }+ `0 X2 K" @
    <div class="container">5 k% k% S8 R* R
    <table style="width:100%">
    0 p/ i) Z2 S- Q. s, ]4 v7 g  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
    % F( h6 Y0 z4 F! B+ b: h. E! r  <div class="middle">% S# U0 b+ X) ?2 {7 e: `
        <div class="text">John Doe</div>% {* Q/ @* S+ u
      <tr>
    9 V+ K* N" |" A+ h    <td>1</td>/ N1 W' O" q' a& b9 W+ A6 c9 }
        <td></td> 1 o4 [0 [9 q6 M) w$ I% Q9 }+ X4 h, n9 R; v
      </tr>
    / J0 l7 V" F7 i4 ]1 P9 |+ V( Z+ A  <tr>  x6 G- J5 P/ `8 m, M# z; p
        <td>2</td>, E' K* Q% T  \5 W: q0 e
        <td></td>9 b/ k: T9 h$ [6 N6 c" D7 J
        </tr>
    1 |$ i. U! ]; \7 y3 N    <tr>* G$ I5 B2 U: b: h' {
        <td>3</td>
    # K% ]7 \( B% t- g% Q    <td></td>8 i& q7 {& ]- M# ?  k
        </tr>* L* \. G* |# Z. j8 [  _
          <tr>' H, A8 o6 p. L0 L* K# k4 m5 e
        <td>4</td>0 k6 b6 e4 U2 E9 r! W$ O5 w0 h
        <td></td>
    % {% E; P0 V! C  v    </tr>3 q/ q6 h. ^" L/ D, D
          <tr>
    4 W4 T8 p0 z6 ]    <td>5</td>
    ( Y6 Y# }5 J  j- g- K    <td></td>
    , j, f6 z8 M7 Q- D' n/ g/ @+ H    </tr>  + k. k8 J7 r2 I8 U2 t& j
    </table>
    : ^- h4 W% N, b& Y8 V# [</div>
    + l% o, a$ X3 T9 o+ [1 W4 J</body>
    $ x4 }3 A+ \. y. L7 C6 _2 ]</html>0 {! P& a* {3 Y+ n4 N
    : z' t9 j2 [7 \
      
    ; u2 d4 h- J( U1 \. _4 e</div>1 c" e) ?3 @9 V/ h
      
    & V* O" z7 y! ?+ M8 y4 i</body>1 |4 `6 p% E# @1 s
    </html>
    0 s4 N" A+ M, z3 G% f& P4 x' J
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    顶部qrcode底部
    关注掌上百科官方微信公众号送积分
    关注掌上百科官方微信公众号
    关注微信公众号 pdawiki,获取邀请码,看文抢积分,抽奖得浮云! Follow our Wechat official account "pdawiki", get invitation codes, and play the lottery to earn points (积分)!

    小黑屋|手机版|Archiver|PDAWIKI ( 美ICP 0000000字 )|网站地图

    GMT+8, 2021-8-3 10:02 , Processed in 0.034586 second(s), 8 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表