其他分享
首页 > 其他分享> > 更多的样式

更多的样式

作者：互联网

更多的样式

透明度

1.opacity，它设置的是整个元素（包括里面的东西，都会透明）的透明度，它的取值是0–1（不透明）

 div{
          position: absolute;
          width: 200px;
          height: 200px;
          background: red;
          left: 100px;
          top: 100px;
          opacity: .5;
      }
  </style>
</head>
<body>
    <div>
Lorem, ipsum dolor.
    </div>
</body>
</html>

2.在颜色位置设置alpha通道（rgba）（0–1）

 background:rgba(255,5,5,.5);
          left: 100px;
          top: 100px;
          /* opacity: .5; */
          border: 15px solid rgba(0,0,0,.5);
          color: rgba(0,0,0,.5);
          background-clip: padding-box;
          /* 背景颜色覆盖填充区 */

鼠标

使用cursor设置

 /* cursor: pointer; */
            cursor: url("爱心.ico"),auto;
            /* 鼠标图片后缀名为ico或者cur,url为地址意思 */
            /* 后面加auto，是因为害怕图片加载不出来，使用浏览器默认鼠标样式 */

盒子隐藏

1.display：none，不生成盒子，可能会影响其他盒子的排列。

2.visibility：hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间，不会影响其他盒子的排列。

背景图

和img标签的区别

img标签是属于HTML的概念

背景图属于css的概念

1.当图片属于网页内容时，必须使用img标签（广告)

2.当图片仅用于美化网页时，必须使用背景图

设计的css属性

1，background-image：设置背景图

 background-image: url("爱心.jpg");
            /* 如果新建一个css文件，读取图片时要出问题，此时必须返回上一级目录../,给整个网页设置背景图，给body标签设置 */
        }

2.background-repeat：是一个速写属性可以设置为repeat-x,repeat-y;no-repeat;

默认情况下,背景图会在横坐标和纵坐标中进行重复,很小一张图重复铺满整个页面

 background-repeat: no-repeat;

3.background-size

预设值：contain，cover，类似于object-fit

 background-size: cover;
          /* 一定要撑满这个区域，且比例不变，所以图片的某些部分就隐藏掉了 */
          /* background-size: contain;保证图片完整显示同时不改变比例 */
        }

数值或百分比

background-size:100% 100%;
        /* 横向撑满，纵向撑满 */
        background-size: 299px 299px;

4.background-position：

设置背景图的位置

 background-position:center top; 
 横向居中，纵向靠上，以此内推

预设值：left，right，top，bottom，center，

数值或百分比

background-position: 2px 2px;
    /* 第一个是离左边的距离，第二个是离上边的距离，可以写负数 */

雪碧图（精灵图）（spirit）把很多小的图片合并为一张大的图片
从雪碧图里取出某一小部分，先利用background-position将图片调到左上角，然后改变宽高。

 div{
            width: 300px;
            height: 300px;
            border: 2px solid ;
            background-image: url("爱心.jpg");
            background-repeat: no-repeat;
            background-position:-47px -30px ;
        }

5.background-attachment
通常同他控制背景图是否固定。

body{
            background-image: url("天桥.png");
            background-repeat: no-repeat;
            background-size: 100%;
           background-attachment: fixed;
           /* 背景图相对于视口固定 */
        }
    </style>
</head>
<body>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere earum mollitia facilis porro aut labore impedit odit debitis fuga quo saepe deleniti, dolorum adipisci eum quam reiciendis possimus. Eligendi sunt molestias quos, excepturi, autem repudiandae architecto dignissimos nisi ipsa, blanditiis minus. Distinctio cupiditate necessitatibus consequuntur, atque nihil veniam sint, enim, ipsum saepe nesciunt magni! Quo minus ab consectetur harum consequuntur incidunt exercitationem, praesentium dignissimos consequatur illo dolorum a ullam rerum aspernatur optio cupiditate minima nemo sunt sed voluptatum aliquam obcaecati sapiente cum. Dicta, in corporis harum, ab odio dignissimos odit pariatur suscipit veritatis vitae a quae! Porro eum non eos ullam similique, aut ad id repellendus magni vero laudantium hic laboriosam? Quam doloremque vitae repellat repudiandae quis dignissimos rerum consectetur, sapiente aut cupiditate optio eius maxime ratione quod culpa veritatis enim voluptate illo accusantium, a tempora, sunt explicabo earum itaque? Excepturi assumenda delectus inventore enim sequi mollitia. Ullam voluptate vitae dolor nemo in doloribus consequuntur velit tempora sapiente nesciunt qui exercitationem aliquid soluta provident omnis facilis distinctio, suscipit minus reprehenderit assumenda alias odit consectetur! Expedita reprehenderit facere tenetur ea! Omnis, odit! Fuga, iusto? Quibusdam minus laborum voluptates! Laborum quasi consequatur assumenda aliquam. Sequi aspernatur ipsam modi neque iste, eos quaerat, nostrum voluptates sunt, suscipit voluptas? Sit animi cumque molestiae a. Vitae maxime debitis porro accusamus aut eligendi ipsum iusto, aliquam ducimus maiores rerum quisquam praesentium eum deserunt cupiditate architecto blanditiis? Et tempore commodi natus sunt fuga aliquid placeat nisi. Debitis, exercitationem. Tempore tempora earum in repellendus repudiandae aperiam expedita dolores laudantium possimus porro officia vel esse accusantium, nesciunt dignissimos ut numquam officiis ad! Dicta quas sunt soluta minus similique, facilis molestias eius a, nobis, eveniet eum odit rem quaerat reprehenderit. Ea sapiente cum officiis, impedit quae nam aliquid culpa quasi sint atum est eos adipisci ut nisi. Excepturi dolorum quibusdam recusandae voluptatem! Odio animi voluptates voluptatibus provident necessitatibus iure harum alias debitis repellat ab recusandae pariatur placeat, repudiandae at veritatis dignissimos ad cumque maiores obcaecati doloribus cum asperiores distinctio! Maxime commodi quo labore corporis consectetur asperiores animi, recusandae quod, iste soluta minus odit delectus debitis libero quis adipisci inventore? Optio, veritatis. Dolor error praesentium quos culpa, doloribus ullam consequatur provident aliquid officia omnis animi assumenda sed corrupti ea! Voluptates officia ad quo eligendi vel vitae facilis ea atque deleniti pariatur voluptate ex voluptatem minima minus tenetur at, impedit voluptas iste eum nesciunt? Dolorem expedita reiciendis nulla maiores ipsam odio recusandae possimus veritatis deserunt veniam tempora sit dignissimos, quis commodi cupiditate amet praesentium culpa beatae porro voluptates neque adipisci temporibus nam. Facilis accusantium numquam nesciunt voluptas blanditiis, neque fuga repellendus nam soluta dolorem cupiditate. Atque nobis odit aliquid voluptas consequuntur quis, adipisci alias cum est pariatur. Iure sit possimus eveniet dicta autem numquam incidunt sapiente. Quam doloremque ducimus nostrum dolores. Eaque aliquid facilis, dolore harum ipsam ex quisquam saepe dolorem velit tempore molestias aliquam quaerat, neque nihil vitae commodi deleniti eligendi dignissimos blanditiis, accusamus ipsum? Tenetur consectetur sed beatae accusamus, quae quasi repellendus totam! Debitis iusto quae exercitationem veritatis labore corporis eum aliquid vero sed nesciunt! Iure eum provident numquam nulla officiis omnis incidunt quos nostrum animi nemo aliquam iusto, dolore possimus voluptates nesciunt praesentium a repellendus delectus, quisquam corporis doloremque odio harum fuga? Sed atque suscipit fugit aliquid illo nesciunt eius, vitae quia quibusdam error. Magnam aut cupiditate sapiente, amet culpa nulla porro? Laborum rerum culpa rem asperiores quibusdam sed voluptatibus dolorem inventore officiis enim? Nihil magnam nisi nam vero quisquam ipsum! Natus atque, unde rerum totam quidem sequi aliquam eum vel magnam dignissimos expedita voluptatem eius tenetur necessitatibus. Facere tempora reiciendis explicabo aut illo deserunt repellat. Modi ipsa nostrum quae veritatis quos eos dolore labore unde eveniet. Veritatis a unde inventore? Veritatis nam culpa sit facilis ullam autem dicta possimus inventore. Asperiores velit perspiciatis dolor ducimus excepturi totam iusto doloribus, culpa aspernatur laboriosam eveniet. Aperiam autem, vero dolores ipsa in excepturi ipsam, voluptas consectetur inventore, quisquam tenetur optio error. Inventore praesentium nisi itaque placeat aspernatur optio ab temporibus eius quibusdam laborum perspiciatis similique atque voluptate maxime tempora quasi voluptatum, totam, illo officia consectetur! Labore blanditiis accusamus, aliquam aspernatur possimus in consequatur iusto cupiditate, dolores reiciendis eligendi. Quia commodi exercitationem totam minus in provident ipsa ab itaque accusamus sint nam, voluptatum temporibus at quod quidem libero cupiditate blanditiis accusantium, quisquam maxime quis aperiam optio alias. Vero voluptates corporis deleniti alias illum impedit dignissimos accusantium quo repellat quidem error quos eos repudiandae aliquam rem amet expedita, laborum iusto facilis rerum consequatur. Sapiente commodi pariatur dolor dignissimos labore, sit, nostrum cum tenetur suscipit atque non omnis, nulla sed nam. Molestias libero eaque provident magni ratione suscipit at maiores iusto, dolore animi? Distinctio eos sed et temporibus repudiandae consequatur ratione aliquam eius perferendis doloribus reiciendis iste quos velit voluptas, provident soluta vel nisi. Aut, similique, nemo praesentium cum non harum deleniti quo perferendis facere laudantium et autem consectetur. Itaque aliquid fuga, nihil sunt, in nulla qui repudiandae, beatae obcaecati est deserunt optio dolores rerum? Vel ullam tenetur eveniet quis nulla provident magni vero blanditiis ipsum est. Earum dolor inventore assumenda. Nulla nisi quas pariatur quos laudantium hic assumenda error tempora cupiditate magnam, odit, voluptates qui optio saepe natus, quod beatae? Dicta soluta ipsa ipsam qui debitis iusto maiores laudantium enim, laborum sunt corporis aliquam consectetur iste earum. Ipsam eum natus nulla quod beatae tempore vel minima quisquam, eveniet labore aliquam reiciendis. Cupiditate dolorem quia aliquid temporibus accusamus voluptate minus dolore minima delectus eveniet, ut in eum. Natus minus dignissimos incidunt non ut sapiente. Quia obcaecati et itaque perspiciatis rerum ullam qui cupiditate ea, incidunt placeat a quae. Assumenda optio recusandae asperiores blanditiis dignissimos laudantium sit voluptatum numquam, possimus fuga non libero impedit expedita? Distinctio explicabo veniam repellat tempore minima? Nesciunt vitae repudiandae culpa et blanditiis obcaecati error dolor mollitia officiis alias, inventore distinctio quo! Possimus nobis illo et soluta distinctio, error sequi necessitatibus rerum nesciunt quaerat maiores blanditiis quas ut magnam voluptatibus consectetur atque cupiditate, optio explicabo, eligendi vitae. Voluptatum autem corrupti, quas eligendi de
</body>

6.背景图和背景颜色混用

 background-attachment: fixed;
           /* 背景图相对于视口固定 */
           background-color: lightblue;
           背景图到不了的地方用颜色填充
           color: lightgoldenrodyellow;

7.速写（简写）background
image
repeat
position
size
attachment
color
先写位置，再写尺寸position size（50% 50%/100%）

标签：样式,dignissimos,consectetur,background,背景图,cupiditate,aliquam
来源： https://blog.csdn.net/weixin_51398691/article/details/113895517