html - 无法弄清楚如何为网站正确覆盖带有图像的 div

问题描述

标题对问题的描述很差，抱歉。我的网站中有包含大量内容的 div（“卡片”）。我想要的一个重要的事情是有一个覆盖“卡片”的图像，但是每次我试图正确地调整它们时，它们要么不会从当前的设置中改变，要么相对于页面来说它们的尺寸很大大小而不是“卡片”大小。我已经阅读了有关类似问题的其他线程，但我还没有任何工作。

图像无法正确装入卡片

/* Entire div for card base + image inside it */

.card   {
   display: flex;
   flex-flow: row no-wrap;
   justify-content: space-between;
   width: 275px;
   height: 150px;
   font-size: 25px;
   padding: 20px;
   background-color: #f1f1f1;
   border-radius: 30px;
   box-shadow: 0px 0px 18px #888888;
   transition: all 0.5s ease;
}

.card:hover   {
    background-color: #daeaf5;
}

.card-image   {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.card-img:hover   {
    -webkit-filter: grayscale(0%);
    filter: greyscale(0%);
}

.card-img   {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    border-radius: 30px;
    -webkit-filter: grayscale(100%);
    filter: greyscale(100%);
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
    transition: all 0.5s ease;
}



/* ignore this stuff, it's just styling for the rest of the card */

.card-title   {
    font-size: 10px;
}

.card-content   {
    font-size: 18px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.card-a   {
    color: black;
    text-decoration: none;
    border-radius: 30px;
    margin: 15px;
}

.main   {
   margin-left: 10px;
}

.flex-container   {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-start;
   align-content: flex-start;
}

/* Entire card div, yes I know my code looks like a goblin wrote it, I am a goblin. */
/*So far, this was the only way I have found to get it to work how I wanted to*/

<div class="main">
    <ul type="none">
     <div class="flex-container">

          <a class="card-a" href="###">
        <li>
          <div class="card">
            <div class="left-side">
              <div class="card-title">Make</div>
                <div class="card-content">Template</div>
              <div class="card-title">Model</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Trim</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Year</div>
                <div class="card-content">Temp</div>
            </div>
            <div class="right-side">
              <img class="card-img" src="https://static.turbosquid.com/Preview/001308/648/FU/_D.jpg" alt="Temporary Picture provided by Turbosquid 1308648"/>
            </div>
          </div>
        </li>
          </a>

            
     </div>
    </ul>
</div>

理想情况下，我希望图像紧贴卡片，因此图像上的角与卡片上的角相匹配。我试图将图像重新定位到不同的地方，重新排序 div 并尝试以不同的方式构建所有内容。不幸的是，每次我尝试过，我都离理想的卡片设计越来越远。是的，我知道，与其他任何人的工作相比，代码看起来就像鸡划伤一样，请原谅我可怜的人的经验。

标签： htmlcssimage

<div id="card_image"> <h1>hello World</h1> <p>this Section Has a background image</p> </div> <style> #card_image { background-image:url("https://static.turbosquid.com/Preview/001308/648/FU/_D.jpg"); background-size:25%; backgroun-position:top right; } </style> play with this

html - 无法弄清楚如何为网站正确覆盖带有图像的 div

问题描述

解决方案

推荐阅读