国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]用CSS剪切圓形圖片

canopus4u / 3330人閱讀

摘要：譯用剪切圓形圖片在這個(gè)教程，我們會(huì)介紹一下使用技巧來(lái)渲染出圓形的通過(guò)設(shè)置標(biāo)簽的所有的屬性為正方形寬高的，我們就可以把這個(gè)標(biāo)簽變成圓的。長(zhǎng)方形圖片長(zhǎng)方形圖片會(huì)稍微有一點(diǎn)技巧一點(diǎn)?；仡欉@個(gè)技巧最好適用于正方形的標(biāo)簽，主題正好位于圖片的中心。

<譯>用CSS剪切圓形圖片

在這個(gè)教程，我們會(huì)介紹一下使用CSS技巧來(lái)渲染出圓形的

CSS

.circular--squareP{
    border-radius:50%;
}

通過(guò)設(shè)置img標(biāo)簽的所有的border-radius屬性為正方形寬/高的50%，我們就可以把這個(gè)img標(biāo)簽變成圓的。

長(zhǎng)方形圖片

長(zhǎng)方形圖片會(huì)稍微有一點(diǎn)技巧一點(diǎn)。

去渲染一個(gè)圓形，必須以圓形圖片為基礎(chǔ)

要解決這個(gè)問(wèn)題，我們可以通過(guò)在img標(biāo)簽外面套一層div，然后我們通過(guò)將超過(guò)這個(gè)外層div的img標(biāo)簽的內(nèi)容給裁掉來(lái)實(shí)現(xiàn)。具體的話可以通過(guò)將外層div的overflow屬性設(shè)置為hidden。

為了能夠讓照片的主題不要被裁掉，我們必須要區(qū)別對(duì)待水平和垂直方向的圖片。

水平方向的圖片

HTML

CSS

.circular--landscape{
    display:inline-block;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    border-radius:50%;
}

.circular--landscape img{
    width:auto;
    height:100%;
    margin-left:-50%;
}

高度和寬度屬性必須要保持一樣來(lái)確保這個(gè)div（.circular--landscape）能夠作為正方形渲染起來(lái)

除此之外，高度和寬度屬性必須要等于或者小于img的高度。這能夠確保img元素能夠占滿外層div而不會(huì)多出一部分空白

一般來(lái)說(shuō)，水平方向圖片的主題（但不一定）會(huì)位于圖片的中心位置。為了能夠讓我們盡量不會(huì)把圖片的主題裁剪啦，我們可以通過(guò)把圖片往左移來(lái)彌補(bǔ)圖片剪切的內(nèi)容有點(diǎn)偏右的問(wèn)題。

我們移動(dòng)img標(biāo)簽的大小是外層div的25%，在這個(gè)例子中就是向左50px，我們可以通過(guò)設(shè)置margin-left的屬性來(lái)完成設(shè)置

margin-left:-50px;

圖片的主題會(huì)接近圖片的水平方向中心的假設(shè)并不一定是對(duì)的，最好在你選擇使用這個(gè)技巧的使用把這個(gè)假設(shè)記住。

垂直方向的圖片

HTML

CSS

.circular--portrait{
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    border-radius:50%;
}

.circular--portrait img{
    width:100%;
    height:auto;
}

對(duì)于垂直方向上的圖片的主題在垂直方向的中心的假設(shè)當(dāng)然也不適用于每一個(gè)垂直方向上的圖片。

和水平方向的圖片類(lèi)似，外層div的寬度和高度最好等于垂直方向圖片你的寬度，這樣的話可以產(chǎn)生最好的效果。

對(duì)于垂直方向的圖片，我們把寬度設(shè)置為100%，高度設(shè)置為auto（和水平方向的圖片相反）

我們不需要移動(dòng)這個(gè)img元素，因?yàn)檫@張照片的主題就在上方中心位置。

回顧

這個(gè)技巧最好適用于正方形的img標(biāo)簽，主題正好位于圖片的中心。但是，我們的世界并不是那么完美的，所有如果需求是這樣，我們就可以使用div來(lái)把長(zhǎng)方形img標(biāo)簽變圓。

CSS中用來(lái)負(fù)責(zé)把圖片變圓的屬性是border-radius，把邊的圓角變成高度/寬度的50%就可以產(chǎn)生一個(gè)圓。

原文鏈接：circular-images-css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111191.html

相關(guān)文章

  • 如何使用CSS和SVG剪切和遮罩技術(shù)

    摘要：通過(guò)結(jié)合使用和遮罩技術(shù)，你將會(huì)擁有更多的可能性去使用網(wǎng)絡(luò)圖像。在圖像上應(yīng)用遮罩元素為了使用得到一種感覺(jué)，我們將在圖像上使用遮罩。瀏覽器支持在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對(duì)剪切和遮罩的支持不一致是非常重要的。 本文轉(zhuǎn)載自：眾成翻譯譯者：hidoos鏈接：http://www.zcfy.cc/article/1100原文：https://getflywheel.com/...

    hover_lew 評(píng)論0 收藏0

  • [譯] 負(fù)邊距詳解

    摘要：正是因?yàn)闆](méi)有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問(wèn)題。不理解它負(fù)邊距不會(huì)在的設(shè)計(jì)窗口展示出效果。有兩種場(chǎng)景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡(jiǎn)單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來(lái)，表格的使用漸漸退去，成為歷史。正因?yàn)榇?，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。...

    Vixb 評(píng)論0 收藏0

  • [譯] 負(fù)邊距詳解

    摘要：正是因?yàn)闆](méi)有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問(wèn)題。不理解它負(fù)邊距不會(huì)在的設(shè)計(jì)窗口展示出效果。有兩種場(chǎng)景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡(jiǎn)單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來(lái)，表格的使用漸漸退去，成為歷史。正因?yàn)榇耍瑥哪且院驝SS布局成為了優(yōu)雅代碼的代名詞。...

    Richard_Gao 評(píng)論0 收藏0

  • 幾個(gè)CSS技巧的分享

    摘要：創(chuàng)建剪切動(dòng)畫(huà)對(duì)于剪切動(dòng)畫(huà)，使用代替，避免重排導(dǎo)致性能過(guò)低。其中屬于萬(wàn)金油，大多數(shù)場(chǎng)景可以直接用它，但還是有些特殊的場(chǎng)景不能用子元素需要文字截?cái)?，為了兼容的瀏覽器，必須使用其他方式一般是子元素需要多行布局，的不支持，不能多行布局 創(chuàng)建剪切動(dòng)畫(huà) 對(duì)于剪切動(dòng)畫(huà)，使用clip-path代替width/height，避免DOM重排導(dǎo)致性能過(guò)低。 .animate { width: 200px...

    itvincent 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<