图像的样式代码不起作用？ [英] Styling code for images not working?

问题描述

我在sass中设计了一些图像，因为即使代码也是用css编译的，也没有发生任何事情。











这是图像的html部分。

< div class =composotion> 
 
< img src =img / nat-1-large.jpgalt =Photo 1class =composition_photo composition_photo  -  p1> 
 
< img src =img / nat-2-large.jpgalt =Photo 2class =composition_photo composition_photo  -  p2> 
 
< img src =img / nat-3-large.jpgalt =Photo 3class =composition_photo composition_photo  -  p3> 
 
< / div> 
 

现在，这些图像的sass部分。

 .composotion {
 
位置：相对; 
 
& __ photo {
宽度：20％; 
 
仓位：绝对; 
 
 
 
&  -  p1 {
 left：0; 
 top：-2rem; 
 
 
} 
 
&  -  p2 {
 right：0; 
 top：2rem; 
 
 
} 
 
&  -  p3 {
 left：20％; 
 top：10rem; 
 
 
} 
 
 
} 
} 

仍然没有任何工作。请帮助我，这样我就可以离开这条河。



我尝试了什么：



我试图更改代码中的所有内容，当我删除除宽度之外的所有内容然后它工作一点但不完全...

解决方案

编译的CSS是：

。< span class =code-leadattribute> composotion  {
  position  ： < span class =code-keyword> relative;  
} 
。 composotion__photo  {
  width  ：  20％;  
  position  ： 绝对值;  
} 
。 composotion__photo  -  p1  {
  left  < span class =code-keyword>：  0;  
  top  < span class =code-keyword>：  -2rem;  
} 
。 composotion__photo  -  p2  {
 正确 ：  0;  
  top  ：  2rem;  
} 
。 composotion__photo  -  p3  {
 左 ：  20％;  
  top  ：  10rem;  
} 

注意照片类名称中的双下划线。您的HTML只有一个下划线。



将& __ photo 更改为& ; _photo ，或更改您的照片类名称以匹配生成的类名称 - 例如： class =composition__photo composition__photo - p1

I was styling some images in sass as nothing is happening to them even that code is compiled in css too.





This the html portion of that images.

<div class="composotion">

      <img src="img/nat-1-large.jpg" alt="Photo 1" class="composition_photo composition_photo--p1">

      <img src="img/nat-2-large.jpg" alt="Photo 2" class="composition_photo composition_photo--p2">

      <img src="img/nat-3-large.jpg" alt="Photo 3" class="composition_photo composition_photo--p3">

  </div>

Now, the sass portion of those images.

.composotion {

   position: relative; 

   &__photo {
       width: 20%;
     
       position: absolute;

       

       &--p1 {
        left: 0;
        top: -2rem;


    }

    &--p2 {
        right: 0;
        top: 2rem;


    }

    &--p3 {
        left: 20%;
        top: 10rem;


        }

   
}
}

And still nothing is working.Please help me so i can get out of this river.

What I have tried:

I tried to change every thing the code and when i remove everything except the width then it works a little bit but not wholly ...

解决方案

The compiled CSS is:

.composotion {
  position: relative;
}
.composotion__photo {
  width: 20%;
  position: absolute;
}
.composotion__photo--p1 {
  left: 0;
  top: -2rem;
}
.composotion__photo--p2 {
  right: 0;
  top: 2rem;
}
.composotion__photo--p3 {
  left: 20%;
  top: 10rem;
}

Note the double underscores in the photo class names. Your HTML only has a single underscore.

Either change &__photo to &_photo, or change your photo class names to match the generated class names - eg: class="composition__photo composition__photo--p1"

这篇关于图像的样式代码不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！