第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有辦法自動為圖像添加漸變?

有沒有辦法自動為圖像添加漸變?

繁星淼淼 2022-11-11 13:45:47
這是我的代碼:<div class='my-posts-container' id='<%=postobj._id%>'>        <%var menuid='menu'+postobj._id%>        <%var imagesource='../'+postobj.blob.path%>        <div class="my-posts-container-header">             <%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%>         </div>        <div class="menu hide" id="<%=menuid%>" >            <ul >                <li><button onclick="viewpost('<%=postobj._id%>')"  >view</button></li>                <li><button onclick="removepost('<%=postobj._id%>')"  >remove</button></li>                <!-- <li><button onclick="copypostlink('<%=postobj._id%>')"  >copy link</button></li>                <li><button onclick="editthispost('<%=postobj._id%>')"  >edit</button></li> -->            </ul>        </div>        <div class="post-image" >                            <img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">            </div>               <span>            <%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>        </span>        <hr>        <div class="caption">             <%=postobj.caption%>         </div>        我想將圖像大小保持為 400px *400px 但添加背景顏色 .post_image div,基本上,我想根據(jù)圖像標簽中的任何圖像向背景添加漸變,如下所示,這樣可以覆蓋整個 400 X 400 尺寸是否可以實現(xiàn),如果不能,您能否建議我其他選擇,謝謝。
查看完整描述

2 回答

?
有只小跳蛙

TA貢獻1824條經(jīng)驗 獲得超8個贊

你可以用 CSS 實現(xiàn)類似的東西


考慮使用這個樣式表


<style type="text/css">

  .blured {

    width:320px;

    height:320px;

    position: relative;

    overflow: hidden;

  }


  .blured .blur {

    height:70px;

    width:100%;

    position:absolute;

    filter: blur(7px);

  }


  .blured .top {

    top:0px;

    background: linear-gradient(#000000d9, #00000000)

  }


  .blured .bottom {

    bottom:0px;

    background: linear-gradient(#00000000, #000000d9)

  }

</style>

然后使用以下標記


<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>

  <div class='blur top'></div>

  <div class='blur bottom'></div>

</div>

結(jié)果將是這樣的:

http://img1.sycdn.imooc.com//636de1bb00019b6506570357.jpg

您可以嘗試使用linear-gradient顏色和值blur()來實現(xiàn)接近您要求的輸出。



查看完整回答
反對 回復 2022-11-11
?
湖上湖

TA貢獻2003條經(jīng)驗 獲得超2個贊

你描述的效果其實是可以實現(xiàn)的。您只需要在圖像頂部堆疊尺寸較小的相同圖像。然后可以模糊下面的圖像,它將跨越該400px x 400px區(qū)域的其余部分。


為此,您需要將position封閉的字段設(shè)置div為 ,relative并將兩個圖像的字段設(shè)置為absolute。我已將位于頂部的圖像的高度降低到200px并保持圖像寬度與下面的圖像相同,以類似于問題中圖像的樣式。用于filter: blur()模糊較大的圖像。模糊會柔化圖像的邊緣(刪除該clip屬性,您就會知道)。使用該clip屬性使邊緣看起來“清晰”。


我用過這張圖片。運行下面的代碼片段以查看它的實際效果:


<!DOCTYPE html>

<html>

<style>

*{box-sizing: border-box;}

.container {

    margin: auto;

    position: relative;

    width: 50%;

}

.outer {

    filter: blur(5px);

    position: absolute;

    z-index: -1;

    clip: rect(0,400px,400px,0);

    

}

.inner {

    position: absolute;

    top: 100px; 

}

</style>

<div class="container">

    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">

    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">

</div>

</html>


這回答了你的部分問題?,F(xiàn)在,要根據(jù)尺寸自動放置圖像,您可以使用 JavaScript 檢索和更新圖像尺寸:


var image = new Image();


image.onload = function() {

  var height = image.height;

  var width = image.width;


}


image.src = "<source>";

下面的圖像將永遠是400 x 400 px,您可以根據(jù)其實際檢索到的尺寸更新頂部圖像的屬性,如果它小于400 x 400 px. 否則,將其壓扁400 x 400 px以覆蓋下面的整個圖像。

查看完整回答
反對 回復 2022-11-11
  • 2 回答
  • 0 關(guān)注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號