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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何相對(duì)于圖像定位 div?

如何相對(duì)于圖像定位 div?

瀟瀟雨雨 2024-01-18 15:50:47
我有一個(gè)作品集頁(yè)面,其中包含一個(gè)網(wǎng)格,其中包含帶有信息疊加的圖像。這是鏈接:cyrilmoisson-dev.netlify.app有沒(méi)有一種解決方案可以使覆蓋 div 的大?。ǜ叨群蛯挾龋┡c圖像完全相同,而不使用類(lèi)似的東西background: url(...); 問(wèn)題是圖像是隨機(jī)大小的......這個(gè)問(wèn)題不是這個(gè)問(wèn)題的重復(fù),因?yàn)樗€沒(méi)有為我解決。這是每個(gè)圖像的組件代碼:src/component/ImageWithInfos/ImageWithInfos.jsx:// Lazyloadimport LazyLoad from 'react-lazyload';// Styleimport { ImageContainer, ImageSrc, ImageInfoContainer, ImageInfo } from './styles';// Utilsimport PropTypes from 'prop-types';import { v4 as uuid } from 'uuid';const ImageWithInfos = ({ height, width, src, title, infos }) => (    <LazyLoad height={height} offset={height + 100}>        <ImageContainer height={height} width={width}>            <ImageSrc src={src} alt={title} />            <ImageInfoContainer>                <ImageInfo main>{title}</ImageInfo>                {infos.map((info) => <ImageInfo key={uuid()}>{info}</ImageInfo>)}            </ImageInfoContainer>        </ImageContainer>    </LazyLoad>);ImageWithInfos.propTypes = {    height: PropTypes.number.isRequired,    width: PropTypes.number.isRequired,    src: PropTypes.string.isRequired,    title: PropTypes.string.isRequired,    infos: PropTypes.array,};export default ImageWithInfos;src/component/ImageWithInfos/index.jsexport { default } from './ImageWithInfos';感謝您的幫助。順便說(shuō)一句:我正在使用反應(yīng)和樣式組件,如果它改變了什么......
查看完整描述

1 回答

?
哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

我相信您可以將圖像和覆蓋層放在同一個(gè) div 中,并讓覆蓋層元素覆蓋整個(gè)父 div:


<div className="parent">

  <img />

  <div className="overlay"></div>

</div>

.parent {

  position: relative;

}


.overlay {

  position: absolute;

  width: 100%;

  height: 100%;

}


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 108 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

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