-
如何用CSS实现背景图片自适应？ 用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。 例如： .picLUp{ background:url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png) no-repeat; width:100%; height:40%; background-size:100% 100%; } 这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数 background-size:cover 设置cover参数以后，背景图会按比例缩放填充满整个背景。 如果使用IE浏览器你会发现，上面的 background-size:100% 100%; 并没有起到作用，图片原本是怎样就怎样显示，比较大就只能显示一部分。 所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。 AlphaImageLoader 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) AlphaImageLoader 属性： enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false_ true: 默认值。滤镜激活。false: 滤镜被禁止。sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop: 剪切图片以适应对象尺寸。image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale: 缩放图片以适应对象的尺寸边界。src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。特性: Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。src: 可读写。字符串(String)。参阅 src 属性。说明: 在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容 hello{ width:10%; height:50%; position:absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.w3cschool.cn/attachments/knowledge/201610/14632.png',sizingMethod='scale'); } 这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。 -
css里怎样设置字体大小和字体颜色 在 CSS 中，可以通过以下属性设置字体大小和颜色：1. 设置字体大小（font-size）selector { font-size: 值; }常用单位：px：像素（绝对单位，如 16px）em：相对单位（基于父元素字体大小，如 1.5em）rem：相对单位（基于根元素 <html> 的字体大小，如 1.2rem）%：百分比（如 120%）vw/vh：视窗宽度/高度的百分比（如 2vw）示例：p { font-size: 16px; /* 固定像素 */ } h1 { font-size: 2em; /* 父元素字体大小的2倍 */ } body { font-size: 1.2rem; /* 根元素字体大小的1.2倍 */ }2. 设置字体颜色（color）selector { color: 颜色值; }颜色值的写法：颜色名称：如 red, blue, green十六进制：如 #ff0000（红色），简写 #f00RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)（带透明度）HSL/HSLA：如 hsl(0, 100%, 50%)（色相、饱和度、亮度）示例：h1 { color: #333; /* 深灰色 */ } .highlight { color: rgb(255, 0, 0); /* 红色 */ } .transparent-text { color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */ }完整示例<style> .title { font-size: 24px; color: #ff5722; /* 橙色 */ } .subtitle { font-size: 1.5rem; color: hsl(210, 100%, 50%); /* 亮蓝色 */ } .small-text { font-size: 0.8em; color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */ } </style> <h1 class="title">这是标题</h1> <p class="subtitle">这是副标题</p> <p class="small-text">这是小号文字</p>注意事项：响应式设计：建议优先使用 rem 或 em 单位，便于整体调整字体大小。可访问性：确保颜色对比度足够（如深色文字配浅色背景）。继承性：color 属性会被子元素继承，但 font-size 的具体表现取决于使用的单位（如 em 基于父元素，rem 基于根元素）。如果需要同时设置字体家族，可以结合 font-family 使用：body { font-family: "Arial", sans-serif; font-size: 1rem; color: #333; } -
CSS字体样式值 字体样式 font-weight: 文字粗细 normal: 默认值，标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，而700等同于bold inherit：继承父元素字体的粗细值 <style> .c1 {font-weight: bold;} #p2 {font-weight: bolder;} #p3 {font-weight: lighter;} #p4 {font-weight: 500;} #p5 {font-weight: inherit;} </style> <p>石灰吟</p> <hr> <p id="p1" class="c1">千锤万凿出深山</p> <hr> <p id="p2">，烈火焚烧若等闲</p> <hr> <p id="p3">。粉身碎骨全不怕</p> <hr> <p id="p4">要留清白在人间</p> <hr> <ul class="c1"> <li> <p id="p5">于谦 [明代]</p> </li> </ul>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 文字风格 font-style: -- 文字风格 normal; -- 正常，默认就是正常的 italic; -- 倾斜 <style> #p1 {font-style: italic;} #p2 {font-style: normal;} </style> <p id="p1">死去元知万事空，但悲不见九州同</p> <hr> <p id="p2">王师北定中原日，家祭无忘告乃翁</p>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 字体大小 一般是12px或13px或14px 注意： 1、通过font-size设置文字大小一定要带单位，即一定要写px; 2、如果设置成inherit表示继承父元素的字体大小值。 <style> #p1 {font-size: 20px} .c1 {font-size: 25px} #p2 {font-size: inherit} </style> <p id="p1">竹石</p> <div class="c1" > <p>咬定青山不放松，立根原在破岩中</p> <a id="p2">千磨万击还坚劲，任尔东西南北</a> </div>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 文字字体 font-family: -- 字体风格 常见字体： serif 衬线字体 sans-serif 非衬线字体 中文：宋体，微软雅黑，黑体 注意： 设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。 如果取值为中文，需要用单或双引号扩起来 <style> #p1 {font-family: "微软雅黑"} #p2 {font-family: "宋体"} #p3 {font-family: "华文行楷"} #p4 {font-family: "华文隶书"} #p5 {font-family: "华文细黑"} #p6 {font-family: "华文楷体"} </style> <p id="p1">采桑子.重阳</p> <p id="p2">人生易老天难老，岁岁重阳。</p> <p id="p3">今又重阳，战地黄花分外香。</p> <p id="p4">一年一度秋风劲，</p> <p id="p5">不似春光。</p> <p id="p6">胜似春光，廖廓江天万里霜。</p>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 字体颜色 color：rgb(123,123,123); -- 字体三原色拼凑字体颜色 color：red; -- 预设颜色 登录后复制 <style> #p1 {color: red} #p2 {color: blueviolet} #p3 {color: blue} #p4 {color: #00ff88} #p5 {color: rgb(123, 123, 123) } </style> <p id="p1">人生易老天难老，岁岁重阳。</p> <p id="p2">今又重阳，战地黄花分外香。</p> <p id="p3">一年一度秋风劲，</p> <p id="p4">不似春光。</p> <p id="p5">胜似春光，廖廓江天万里霜。</p>复制代码 ----------------------------------- CSS字体样式值 -
HTML+CSS+JS实现雪花飘扬 使用HTML+CSS+JS如何实现下雪特效？下面本篇文章给大家分享一个HTML+CSS+JS实现雪花飘扬的示例，希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果 可以点击看看在线运行：http://haiyong.site/xiaxue 首先看看项目结构，一张雪花图片，一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了，或者可以直接用图片地址：https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png 开局一张图，内容全靠JS。 HTML代码 下面这是 html 里的内容，没啥东西 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>海拥| 雪一片一片</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="keywords" content="雪一片一片" /> <meta name="description" content="工具 | 雪一片一片；立志打造一个拥有100个小游戏的摸鱼网站。Made By Haiyong，技术支持——海拥" /> <meta name="author" content="海拥(http://haiyong.site/moyu)" /> <meta name="copyright" content="海拥(http://haiyong.site/moyu)" /> <link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" sizes="192x192" /> <style type="text/css"> body{ background-color: #000000; margin: 0;/* 去掉自带的外边距 */ } img{ position: absolute; } </style> </head> <body> <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script> </body></html> JS代码： 首先开启定时器添加雪花图片，这里的<img src='images/snow.png'>可以改成<img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png' setInterval(function(){var img = $("<img src='images/snow.png'>"); $("body").append(img); 这里设置雪花的尺寸为10-20px,下面的公式即表示(0-10 + 10)px var size = parseInt(Math.random()*11)+10; img.css("width",size+"px"); 得到屏幕宽度 var w = $(window).width(); 取值范围应该是0-屏幕宽度-雪花宽度 var left =parseInt(Math.random()*(w-size)); 把得到的随机1eft给到图片 img.css("left",left+"px"); 添加雪花移动的动画，得到雪花移动的距离 = 屏幕高度-雪花尺寸 var top = $(window).height()-size; 下面注释中的代码是用来清除缓存的，可加可不加。 img.animate({"top":top+"px"},size*100) /* .fadeOut(1000,function(){ //当动画完成时执行此代码，清除缓存 img.remove(); //console.log($("img").length); }); */ },10) 取消注释就会看到落下的雪会消失，如下图所示 喜欢看积雪就可以把它注释掉，预览效果像下面这样 到这里我们要实现的效果就完成了，如果运行时间过长可能会导致内存占用过多造成卡顿现象，可以将html代码中的最后一段注释里的内容取消注释，这样到下面的积雪就会慢慢淡出并且remove删除了，不过我觉得积雪也挺好看的，就没让它融化，像下面这样： -
css里面怎么让body内容居中 css里面让body内容居中的方法：1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；3、通过jQuery实现水平和垂直居中。 本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。 推荐：css视频教程 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明，本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 复制代码.mydiv{ margin:0 auto; width:300px; height:200px; } 但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了 CSS实现水平和垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 复制代码.mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } 该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下： 复制代码$(window).resize(function(){ $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").outerWidth())/2, top: ($(window).height() - $(".mydiv").outerHeight())/2 }); }); 此外在页面载入时，就需要调用resize()。 复制代码$(function(){ $(window).resize(); }); 此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。 ps:如果该div的宽度大于页面的宽度，那么需要对body添加一个css 复制代码<style type="TEXT/CSS">body{width:100%; overflow:hidden}</style> 以上就是css里面怎么让body内容居中的详细内容！ -
css怎么设置图片圆角 css设置图片圆角的方法：首先打开相应的代码文件；然后通过在<style>标签内添加代码如“-moz-border-radius:10px;-webkit-border-radius:10px;”来设置图片圆角即可。 本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。 代码实例： border-radius: 15px; 把下列代码添加进入你的<style>标签内 img { border-radius: 10px; /* 统一设置四个角的圆角半径 */ } 进阶用法 单独设置每个角： img { border-radius: 10px 20px 30px 40px; /* 顺序：左上 右上 右下 左下 */ } 2.椭圆形圆角（将图片变为圆形）： img { border-radius: 50%; /* 宽度和高度的50% */ /* 确保图片是正方形，否则会变成椭圆 */ width: 200px; height: 200px; object-fit: cover; /* 保持比例裁剪 */ } 示例代码 <style> .rounded-img { border-radius: 15px; width: 300px; } .circle-img { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; } </style> <img class="rounded-img" src="your-image.jpg" alt="圆角图片"> <img class="circle-img" src="your-image.jpg" alt="圆形图片"> 清空缓存，看看效果吧（部分IE版本可能不支持） -
-
给网站底部底部添加蓝色波浪 其实这是很简单的一个HTML+CSS代码，只要将以下代码添加到你的网站底部就可以轻松实现蓝色波浪的动态效果了。 效果展示 使用方法 模板文件位置 Typecho Markup wwwroot/usr/themes WordPress Markup wwwroot/wp-content/themes 先复制下面代码，打开模板文件的footer.php，将其粘贴在一个合适的位置(切记选择粘贴的地方是上一句结束之处）。 核心代码 Markup <!--底部波浪开始--> <div class="wiiuii_layout"> <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="50" y="0" fill="#0080FF" /> <use xlink:href="#gentle-wave" x="50" y="6" fill="#0066CC" /> <use xlink:href="#gentle-wave" x="50" y="9" fill="#003D79" /> </g> </svg> </div> <style type='text/css'> .parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;} </style> <!--底部波浪结束--> 熟悉css的朋友可以自行修改相关参数，实现自定义效果 -
EmlogPro获取正文第一张图片为封面教程 很多EMLOG模板开发者在制作主题的时候多少都需要在首页展示文章图片或图文形式，那么如何实现这些效果呢，现在就来为大家分享一下EmlogPro获取正文第一张图片为封面的教程。代码支持获取EmlogPro的md编辑器代码格式的图片，也支持获取img标签的图片。有设置文章封面就读取封面，没有设置封面就从正文里获取图片作为封面。 1、打开模板文件module.php，在合适的位置添加如下代码： 复制代码<?php function Thumbn_ail($gid){ $DB = Database::getInstance(); $data = $DB->once_fetch_array("SELECT content,cover FROM ".DB_PREFIX."blog WHERE gid='$gid'"); $rand = TEMPLATE_URL.'img/random/'.rand(1,10).'.jpg'; $pattern1 = '/]((.*?(jpg|jpeg|gif|png|webp)))/i'; $pattern2 = '/<img.*?src=['|"](.*?)['|"].*?[/]?>/i'; if($data['cover']){ $Image = $data['cover']; }else{ preg_match($pattern1, $data['content'], $matchs); if(isset($matchs[1])){ $Image = @$matchs[1]; }else{ preg_match($pattern2, $data['content'], $matchs); $Image = @$matchs[1]; } } return ($Image?$Image:$rand); } ?> 2、在需要的位置添加如下调用代码即可。 复制代码 <img src="<?php Thumbn_ail($value['logid']); ?>" > -
zblog php获取文章的第一张图片，没有调用默认图片 php版的zblog提供了获取文章首张图片的函数代码，直接把函数代码添加到模板文件中，然后调用对应的变量输入图片url即可，默认用于最新文章列表，通过代码调整可用于分类文章列表，比如zblog php企业模板的首页产品展示列表。下面代码一般放入include.php中 复制代码function slimgs($src){global $zbp;if(!$zbp->CheckPlugin('IMAGE')){$thumbs_src=$src;}else{$thumbs_src=IMAGE::getPicUrlBy($src,4);}return $thumbs_src;}function slimg($as,$pos){global $zbp;$temp=mt_rand(1,3);$pattern = "/<img.*?src=(\"|')?(?<src>.*?\.(gif|jpg|jpeg|png))(\"|')?.*?>/"; $content = $as->Content;if($pos->Metas->thumbnail){$temp=$pos->Metas->thumbnail;}else{if(preg_match($pattern,$content,$matchContent) && isset($matchContent['src'])){$temp=$matchContent['src'];}else{$temp=$zbp->host . "zb_users/theme/" .$zbp->theme. "/style/images/pic.png";}}$src = slimgs($temp);return $src;} 调用代码（在循环里面调用）： 复制代码{slimg($related,$related)}
-
Emlog 5.x 列表缩略图调用文章内容首张图片 emlog在首页列表或分类列表中，调用文章首张图片作为缩略图，实现方法是通过php正则表达式匹配文章内容中的img部分，然后提取出图片url，以下是实现代码。 把下面的代码添加到主题的module.php文件： 复制代码1 2 3 4 5 6 7 8 9 10 11 复制代码<?php function boke8_thumbnail($value){ preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $value['content'], $img); if (!empty($img[1])) { $thum_src = $img[1][0]; }else{ $thum_src = TEMPLATE_URL."images/no-image.jpg"; } echo $thum_src;}?> 在log_list.php文件的循环列表中调用： 复制代码1 复制代码<img src="<?php boke8_thumbnail($value);?>" alt="<?php echo $value['log_title']; ?>"/> 提示：如果文章中没有图片，则调用主题images文件夹下的no-image.jpg图片。
-
Emlog模板设置插件修改篇：实现标签标题、描述等均可自定义 第一步：准备工作备份你网站的全部文件，及数据库。确保你的PHP版本在7.0或者以上版本。第二步：清理文件只保留根目录下 config.php 及 content 文件夹，其他都删除第三步：执行sql修改数据库表 复制代码INSERT INTO `emlog_options` (`option_name`, `option_value`) VALUES ('emkey',''); 如果你的数据库表前缀不是 "emlog_" 替换即可第三步：覆盖文件下载最新版本emlog pro安装包，下载页面：https://www.emlog.net/register （页面底部）上传除install.php 和 config.php 外的全部文件第四步：访问网站后台，重建缓存访问 http://你的域名/admin ，登录后左侧点击菜单系统--->数据--->更新缓存