成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

html - css div怎么和它的偽類after共用一樣背景圖片？

瀏覽：165日期：2023-01-29 09:30:31

問題描述

怎么用p畫出這樣的效果html - css div怎么和它的偽類after共用一樣背景圖片？

p怎么和它的偽類after共用一樣背景圖片？能實現(xiàn)嗎？

問題解答

回答1：

css clip可以實現(xiàn)

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

http://bennettfeely.com/clippy/

回答2：

確實需要點小trick,寫了一個看看如何代碼如下：

<body><p class='main'></p></body>

.main { position: relative; width: 412px; height: 261px; background:url(’http://pic.baike.soso.com/p/20130828/20130828162541-2121279471.jpg’) no-repeat; border-radius: 10px;}.main:after { position: absolute; top: 261px; left: 20px; width: 20px; height: 20px; content: ’’; box-sizing: border-box; border-top: 20px solid transparent; border-left: 20px solid #f3f5f6; border-right: 20px solid #f3f5f6; background: inherit; background-position: -20px bottom; background-origin: border-box; }

html - css div怎么和它的偽類after共用一樣背景圖片？

https://jsfiddle.net/ycwalker...

回答3：

1、可以畫三角形2、可以這樣：把背景色換為你需要的圖片，注意色差！.d1{

position: relative;border: 1px dashed #999;background: #fff;width: 150px;height: 100px;

}

.d1 span{

display: block;width: 20px;height: 20px;position: absolute;border-right:1px dashed #999;border-bottom:1px dashed #999;transform: rotate(45deg);bottom: -10px;left: 50%;margin-left:-15px;background: #fff;z-index: 99;

}3、直接PS扣圖最直接了。

回答4：

inherit , inherit 使用繼承。

標(biāo)簽： HTML
相關(guān)文章：